easy-ui的datagrid
生活随笔
收集整理的這篇文章主要介紹了
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>
}*/});} </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>
?
?
?
?
轉載于:https://www.cnblogs.com/whatarewords/p/10718834.html
總結
以上是生活随笔為你收集整理的easy-ui的datagrid的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: mysql master host_my
- 下一篇: URL编码表一览