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
?
