js使用miniUI和easyui建立datagrid
阿新 • • 發佈:2018-12-15
miniUI方法:
function DrugDataGridInt () { var columns = [ { type: "indexcolumn" }, { field: 'time', header: '時間', width: 200, align: 'left', visible: true ,dateFormat:'yyyy-MM'}, { field: 'money', header: '金額', width: 200, headerAlign: 'left',autoescape:true ,visible: true}, { field: 'remark', header: '名稱', width: 250, headerAlign: 'left', autoescape: true,visible: true } ]; var grid = mini.get("YourGridId"); grid.set({ url: basePath + '/mqpms/business_report/base_info/updateUI/ajaxListForContract.do?projectId=' + $('#projectId').val() + '&sessionId=' + _jsSessionId, sizeList: [50,100], pageSize: 50, columns: columns, allowAlternating: true, //顯示間行色 multiSelect: true, fitColumns: false, //使用過濾行必須設定這個全充滿,否則會有列對齊問題。 allowCellEdit: true, allowCellSelect: true, showFilterRow: false, showModified: false, allowMoveColumn: false}); grid.load(); }
miniUI頁面:
<div id="YourGridId" class="mini-datagrid" style="height: 100%; width: 100%;"></div>
easyUI方法:
function loadContractTable() { $("#contract-list").datagrid({ width: "auto", title: "資訊", collapsible: true, rownumbers: true, halign: 'center', pagination: true, pageSize: 10, pageList: [20, 50, 100], method: 'post', singleSelect: false, fitColumns: false,//顯示水平滾動條 url: basePath + '/mqpms/business_report/base_info/updateUI/ajaxListForContract.do?projectId=' + $('#projectId').val() + '&sessionId=' + _jsSessionId, columns: [[ { field: "time", title: "時間", width: '120px', align: 'left', formatter: function (v) { return common.dateTimeFormatter(v, "yyyy-MM"); } }, { field: "money", title: "金額", width: '120px' }, { field: "remark", title: "備註", width: '530px' } ]], }); $('.contract-container .panel-header').remove(); }
easyUI頁面:
<table id="contract-list" style="width: 100%;max-width: 800px;">
</table>