jqGrid入门（1）

官方demo:

http://trirand.com/blog/jqgrid/jqgrid.html#

ui.jqgrid.css

jquery-1.7.2.min.js

jquery.jqGrid.locale-cn.js

jquery.jqGrid.src.js 

1,清空列表

$("#gridStyle").jqGrid("clearGridData");

2，加载数据

1）服务端代码

public ActionResult ProductStyle()

{

CommonQuery bll = new CommonQuery();

string pLineId = Request["pLineId"];

IList<ProductSerialModel> lst = bll.GetProductSerial(pLineId);

return Json(new

{

total = lst.Count / 10,

page = 1,

records = lst.Count,

rows = lst.Select(item => new {Id=item.ProductSerialCode,cell=new string[]{item.ProductSerialCode.ToString(),item.ProductSerialName}.ToArray() })

}, JsonRequestBehavior.AllowGet);

}

2）客户端代码，动态从服务端获取json数据

function loadStyleList() {

$("#gridStyle").setGridParam({

postData: { pLineId: jddlProductLine.val() }

});

$("#gridStyle").jqGrid({

url: "/UC/ProductStyle",

datatype: "json",

mtype: "GET",

postData: { pLineId: jddlProductLine.val() },

colNames: ["ProductSerialCode", "ProductSerialName"],

colModel: [

{ name: "ProductSerialCode", index: "ProductSerialCode", 100 },

{ name: "ProductSerialName", index: "ProductSerialName", 150 }

],

rowNum: 10,

500,

rowList: [10, 20, 30],

pager: $("#gridStylePage"),

sortname: "ProductSerialCode",

viewrecords: true,

sortorder: "desc",

// jsonReader: {

// root:"d.rows",

// page:"d.page",

// total:"d.total",

// records:"d.records"

// },

caption:"款?式ê?列áD表±í",

height:300

}).trigger("reloadGrid");

}

 

========== 已经有json数据，仅填充一下表格:

function fillGrid(jsonData) {

jdivGrid.jqGrid({

datatype:"local",

colNames:["预测销量","实际销量"],

colModel:[

{name:"PredictedDate",index:"PredictedDate",100},

{name:"ActualQty",index:"ActualQty",100}

],

caption:"产品预测"

});

//只能用如下形式，用$.each有问题

for (var i = 0; i < jsonData.length; i++) {

jdivGrid.jqGrid("addRowData", i+1,jsonData[i]);

}

}