easyui datagrid 表格

$(function(){
???$('#depotCountDataGrid').datagrid({
????nowrap: false,
????animate:true,
????collapsible:true,
????loadMsg:'数据加载中请稍后……',
????singleSelect:true,
????frozenColumns:[[
???????????????? {title:'料号',field:'matCode',width:180}
????]],
????columns:[[
?????{field:'matType',title:'产品类型',width:120},
?????{field:'matShow',title:'产品名称',width:120},
?????{field:'matStandard',title:'产品规格',width:120},
?????{field:'matProperties',title:'产品属性',width:120},
?????{field:'matLibNumber',title:'库存数量',width:120}
????]],
????pagination:true,
????rownumbers:true
???});
???searchDepotCount();
??});
??
??function searchDepotCount(){
???$('#depotCountDataGrid').hskDataGridTP("<c:url value='/jxc/sysinfo/depotCount.jsps'/>","importDepotForm_");
???$('#depotCountDataGrid').datagrid('clearSelections');
??}

?

?

// hskDataGridTP? 封装

$.fn.extend({

hskDataGridTP: function(dataUrl, paramid) {
??????? var paramdata = getjsonStr(paramid);
??????? var tableId = $(this).attr("id");
??????? var p = $("#" + tableId).datagrid('getPager');
??????? if (p) {
??????????? $(p).pagination({
??????????????? showPageList: true,
?????????????? pageSize: 20,
??????????????? onSelectPage: function(pageNumber, pageSize) {
??????????????????? paramdata = getjsonStr(paramid);
??????????????????? var nums = (pageNumber - 1) * pageSize;
??????????????????? var objData = '{' + paramdata + ',"pager.offset":' + nums + ',"pager.pagesize":' + pageSize + '}';
??????????????????? $.getJSON(dataUrl, parseObj(objData),
??????????????????? function(jsondata) {
??????????????????????? $("#" + tableId).datagrid("loadData", jsondata);
??????????????????? });

??????????????????? $("#" + tableId).datagrid('reload');
??????????????? }
??????????? });
??????? }

?

});

?

function getjsonStr(Comp) {
??? if (Comp.length <= 1) return "";
??? var idArr = Comp.split(",");
??? var jsonStr = "";
??? var st = "";
??? for (var i = 0; i < idArr.length; i++) {
??????? if ($("#" + idArr[i]).is("form") == true) {
??????????? st = $("#" + idArr[i]).getFormData();
??????? } else {
??????????? var elemName = idArr[i];
??????????? var elevalue = idArr[i].val();
??????????? st = "\"" + elemName.replace(/[ ]/g, "") + "\":\"" + elevalue.replace(/[ ]/g, "") + "\"";
??????? }
??????? jsonStr += st + ",";
??? }
??? jsonStr = jsonStr.substr(0, jsonStr.length - 1);

??? return jsonStr;

}

?

// pager.offset 和?pager.pagesize 可以用后台的过滤器截取赋值给对应变量.

?

?

创建带查询的 表格

?

?<form id="importDepotForm_">
?????? ? ??<ul type="text" name="matCode" size="15" maxlength="70"></input></li>?
???????????????? <li><a href="#" onclick="searchDepotCount()" iconCls="icon-search">查找</a></li>?
????? ? </ul>
????????? </form>

?

<table id="depotCountDataGrid"></table>

?

?

更多请参考:

http://jquery-easyui.wikidot.com/document:datagrid

?