1. 程式人生 > >js使用miniUI和easyui建立datagrid

js使用miniUI和easyui建立datagrid

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>