easy-ui的datagrid
<div id="magazineGrid"></div> <script> $('#magazineGrid').datagrid({ height: 340, //在创建完成后会根据url请求数据,通过ajax完成 url: '<c:url value="/kpOutSystem/view.do?op=getList"/>', method: 'POST', queryParams: { 'id': id }, idField: '产品ID', //该列为唯一列 striped: true, //交替显示行背景 fitColumns: true, //自动使列适应表格宽度以防水平滚动 singleSelect: false, //只允许选择一行 rownumbers: true, //显示行号 nowrap: false, //当数据长度超出列宽时会自动截取 pagination: false,//是否分页 pageNumber:50, //设置分页时,初始化分页码 pageSize: 10, //设置分页时,初始化每页记录数 pageList: [10, 20, 50, 100, 150], //设置分页时,初始化每页记录数列表 showFooter: true, //是否显示表底(可以显示总计) //多表头 columns: [[ { title: '',colspan:3 }, { title: '',colspan:3}, ],[ { field: 'ck', checkbox: true },//添加了checkbox列,自适应宽度 { field: '刊名', title: '刊名', width: 180, align: 'left' }, { field: '类别', title: '类别', width: 150, align: 'left' }, { field: '月份', title: '月份', width: 100, align: 'left' }, { field: '价格', title: '价格', width: 100, align: 'right',hidden:true, },//隐藏 { field: '数量', title: '数量', width: 80, align: 'left', editor: {//行编辑的功能 type: 'numberbox', options: {//对应具体配置 min: 0, precision: 0 } } } ]], onBeforeLoad: function (param) {//ajax请求添加查询条件 var bId = $("#txtBId").val(); var AllSearchKey = $("#txtAllSearchKey").val(); param.bId = bId; param.AllSearchKey = AllSearchKey; }, onLoadSuccess: function (data) { }, onLoadError: function () { }, onClickCell: function (rowIndex, field, value) { } }); </script>
------
<table id="dataTable"></table> <script> var rowData = $('#dataTable').datagrid('getSelected');//获取所选行 function makeDataGrid(){ var sbstr = ""; $('#dataTable').datagrid({ nowrap: true, striped: true, url:'<c:url value="/groupInvoice/view.do?op=getInvoiceList"/>', //在创建完成后会根据url请求数据,通过ajax完成 pageSize:20, pageNumber:1, pageList:[10,20,50], remoteSort:false, columns:[[ {field:'payBillID',title:'支付号',sortable:true,checkbox:true}, {field:'errorMsg',title:'错误信息 ',sortable:true, formatter:function(value,row,index){ if(value !=null){ return "<font color='red'>"+value+"</font>"; } } }, {field:'payId',title:'payId',sortable:true,hidden:true}, {field:'adminName',title:'学员代码',sortable:true}, {field:'idCard',title:'身份证号',sortable:true}, {field:'outSystemSign',title:'外系统编码 ',sortable:true}, {field:'payMoney',title:'支付金额 ',sortable:true}, {field:'payTime',title:'支付时间 ',sortable:true, formatter:function(value,row,index){ if(value !=null){ var result =genStrDateTimeAll(value); return result; } } }, {field:'bankReturnTime',title:'返回时间',sortable:true, formatter:function(value,row,index){ if(value != null){ var result = genStrDateTimeAll(value); return result; } } }, {field:'invoiceStatus',title:'发票状态',sortable:true, formatter:function(value,row,index){ var payBillID = row.payBillID; var payMoney = row.payMoney; var adminName = row.adminName; var parm = ""; parm += "&payBillID="+payBillID; parm += "&payMoney="+payMoney; parm += "&adminName="+adminName; if(value == 0 || value == 9){ return "新申请"; }else{ return "未申请"; } } }, ]], queryParams: { payTimeStart: '${payTimeStart}' , payTimeEnd: '${payTimeEnd}', outSystemSign: '${outSystemSign}', groupID:'${groupID}' }, pagination:true, rownumbers:true, onLoadSuccess:clearSelections /* 动态控制复选框 onLoadSuccess: function(data){ if (data.rows.length > 0) { //循环判断操作为新增的不能选择 for (var i = 0; i < data.rows.length; i++) { //根据operate让某些行不可选 if (data.rows[i].invoiceStatus == 8|| data.rows[i].invoiceStatus == 13||data.rows[i].invoiceStatus == 14 ) { $("input[type='checkbox']")[i + 1].disabled = true; } } } }, onClickRow: function(rowIndex, rowData){ //加载完毕后获取所有的checkbox遍历 $("input[type='checkbox']").each(function(index, el){ //如果当前的复选框不可选,则不让其选中 if (el.disabled == true) { $('#dataTable').datagrid('unselectRow', index - 1); } })
}*/ }); } </script>