jqGrid在MVC中使用方法
阿新 • • 發佈:2019-02-05
Views
<span style="white-space:pre"> </span><div class="jqGrid_wrapper"> <span style="white-space:pre"> </span> <table id="table_list_2"></table> <span style="white-space:pre"> </span> <div id="pager_list_2"></div> <span style="white-space:pre"> </span> </div>
<script> $(document).ready( function () { $("#table_list_2").jqGrid( { url: "/Handler1.ashx", datatype: "json", height: 450, autowidth: true, shrinkToFit: true, rowNum: 20, rowList: [10, 20, 30], colNames: ["序號", "日期", "客戶", "金額", "運費", "總額"], colModel: [ { name: "U_Id", index: "id", editable: true, width: 60, sorttype: "int", search: true }, { name: "U_LoginName", index: "U_LoginName", editable: true, width: 90, sorttype: "string", formatter: "string" }, { name: "U_Pass", index: "U_Pass", editable: true, width: 100 }, { name: "U_Email", index: "U_Email", editable: true, width: 80, align: "right", sorttype: "float", formatter: "string" }, { name: "U_PhoneNumber", index: "U_PhoneNumber", editable: true, width: 80, align: "right", sorttype: "float" }, { name: "UType_Id", index: "UType_Id", editable: true, width: 80, align: "right", sorttype: "float" }], pager: "#pager_list_2", viewrecords: true, caption: "jqGrid 示例2", add: true, edit: true, addtext: "Add", edittext: "Edit", hidegrid: false }); $("#table_list_2").setSelection(4, true); $("#table_list_2").jqGrid("navGrid", "#pager_list_2", { edit: true, add: true, del: true, search: true }, { height: 200, reloadAfterSubmit: true }); $(window).bind("resize", function () { var width = $(".jqGrid_wrapper").width(); $("#table_list_2").setGridWidth(width) }) }); </script>
一般處理程式
public void ProcessRequest(HttpContext context) { NameValueCollection forms = context.Request.Form; string strOperation = forms.Get("oper"); if (strOperation == null) { DataTable dt = GetAccountInfo(); string jsonRes = GetJson(dt); context.Response.Write(jsonRes); } } private DataTable GetAccountInfo() { CYX.Model.UserInfo muser = new CYX.Model.UserInfo(); CYX.BLL.UserInfo buser = new CYX.BLL.UserInfo(); System.Data.DataTable mydt = buser.GetAllList().Tables[0]; return mydt; } private string GetJson(DataTable mydt) { JavaScriptSerializer serializer = new JavaScriptSerializer(); List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>(); Dictionary<string, object> row = null; foreach (DataRow dr in mydt.Rows) { row = new Dictionary<string, object>(); foreach (DataColumn col in mydt.Columns) { row.Add(col.ColumnName.Trim(), dr[col]); } rows.Add(row); } return serializer.Serialize(rows); }