給Jqgrid添加橫向滾動條，實現點擊行數據，觸發事件。

 

function reloadNoKitScheduleGridData() {
    $("#noKittingScheduleList").jqGrid({
        url: "../KittingCheckResult/QueryNoKitSchedule",
        datatype: "json",
        colModel: [
            { name: 'Id', index: 'Id', hidden: true },
            { name: 'IsPublish', index: 'IsPublish', label: '是否發布', width: 60, formatter: 'checkbox', align: 'center' },
            { name: 'Code', Index: 'Code', label: '日排程號', width: 100, align: 'center' },
            { name: 'ProduceTime', Index: 'ProduceTime', label: '生產日期', formatter: 'date', formatoptions: { newformat: 'Y-m-d' }, width: 100, align: 'center' },
            { name: 'ShiftValue', Index: 'ShiftValue', label: '班次', width: 60, align: 'center' },
            { name: 'LineCode', Index: 'LineCode', label: '生產線體', width: 100, align: 'center' },
            { name: 'Qty', Index: 'Qty', label: '排程數量', width: 100, align: 'center' },
            { name: 'CompleteQty', Index: 'CompleteQty', label: '完工數量', width: 100, align: 'center' },
            { name: 'UnProductionQty', Index: 'UnProductionQty', label: '未生產數量', width: 100, align: 'center' },
            { name: 'PlanCode', Index: 'PlanCode', label: '生產計划號', width: 100, align: 'center' },
            { name: 'PrdOrderCode', Index: 'PrdOrderCode', label: '生產訂單號', width: 100, align: 'center' },
            { name: 'MaterialCode', Index: 'MaterialCode', label: '物料代碼', width: 100, align: 'center' },
            { name: 'ProductModel', Index: 'ProductModel', label: '產品型號', width: 100, align: 'center' },
            { name: 'Priority', Index: 'Priority', label: '優先級', width: 60, align: 'center' },
            { name: 'FactoryCode', Index: 'FactoryCode', label: '工廠代碼', width: 80, align: 'center' },
            { name: 'ManuFactoryCode', Index: 'ManuFactoryCode', label: '生產部門代碼', width: 90, align: 'center' },
            { name: 'ManuFactoryName', Index: 'ManuFactoryName', label: '生產部門名稱', width: 90, align: 'center' },
        ],
        pager: "#noKittingSchedulePager",
        rowList: [100, 200, 500, 1000],
        rowNum: 100,
        height: 300,
        width: $("#tabs").width(),
        sortname: 'ProduceTime',
        sortorder: 'desc',
        shrinkToFit: false,
        autoScroll: true,          //shrinkToFit: false,autoScroll: true,這兩個屬性產生水平滾動條   
        autowidth: false,          //必須要,否則沒有水平滾動條
        multiselect: false,
        loadonce: false,
        onSelectRow: function (rowid) {                 //點擊表格中的某一行，觸發事件，獲得數據
            var grid = $("#noKittingScheduleList");
            var rowId = grid.jqGrid("getGridParam", "selrow");        
            var rowData = grid.getRowData(rowId);

            //$("#relativeMaterialMissingList").jqGrid("setGridParam", {datatype:'local',data: rowData }).trigger("reloadGrid");
            //var ids = $("#relativeMaterialMissingList").jqGrid('getDataIDs');
            ////如果jqgrid中沒有數據 定義行號為1 ，否則取當前最大行號+1    
            //var rowid = (ids.length == 0 ? 1 : Math.max.apply(Math, ids) + 1);
            ////獲得新添加行的行號（為什么是負數呢,與編輯行差別對待）    
            //var newrowid = (0 - rowid);
            //$("#relativeMaterialMissingList").jqGrid("addRowData", newrowid, rowData, "first");

                var code = rowData.Code;
                var grid = $("#relativeMaterialMissingList");
                grid.jqGrid("setGridParam", {
                url: "../KittingCheckResult/QueryMaterialMissingReQt",        //取數據的排程代碼，根據代碼查詢數據庫，將返回的數據加載到另一個表格中
                datatype: 'json',
                postData: { ScheduleCode: code },
                loadonce: true
              }).trigger("reloadGrid");
            

        }
            

    });

    $("#relativeMaterialMissingList").jqGrid({
        datatype: "local",
        colModel: [
                { name: 'Id', index: 'Id', hidden: true },
                { name: 'Zrpch', Index: 'Zrpch', label: '日排程號', width: 100, align: 'center' },
                { name: 'Aufnr', Index: 'Aufnr', label: '訂單號', width: 100, align: 'center' },
                { name: 'Zrpcrq', Index: 'Zrpcrq', label: '需求日期', formatter: 'date', formatoptions: { newformat: 'Y-m-d' }, width: 100, align: 'center' },
                { name: 'Werks', Index: 'Werks', label: '工廠', width: 80, align: 'center' },
                { name: 'Matnr', Index: 'Matnr', label: '物料代碼', width: 80, align: 'center' },
                { name: 'Maktx', Index: 'Maktx', label: '物料描述', width: 80, align: 'center' },
                { name: 'Zwscsl', Index: 'Zwscsl', label: '需求數量', width: 80, align: 'center' },
                { name: 'Lgort', Index: 'Lgort', label: '工位庫代碼', width: 80, align: 'center' },
                { name: 'Zgwkmz', Index: 'Zgwkmz', label: '工位庫存滿足量', width: 100, align: 'center' },
                { name: 'Zdymz', Index: 'Zdymz', label: '待驗滿足量', width: 100, align: 'center' },
                { name: 'Zwzkcmz', Index: 'Zwzkcmz', label: '物資庫存滿足量', width: 100, align: 'center' },
                { name: 'Zddmz', Index: 'Zddmz', label: '訂單滿足量', width: 100, align: 'center' },
                { name: 'Zkccy', Index: 'Zkccy', label: '庫存差異量', width: 100, align: 'center' },
                { name: 'Zddcy', Index: 'Zddcy', label: '訂單差異量', width: 100, align: 'center' },
        ],
        pager: "#relativeMaterialMissingPager",
        rowList: [100, 200, 500, 1000],
        rowNum: 100,
        height: 150,
        width: $("#tabs").width(),
        sortname: 'Zrpcrq',
        sortorder: 'desc',
        shrinkToFit: false,
        autoScroll: true,
        autowidth: false,
        multiselect: false,
        loadonce: true
    });

}

 

效果如下：

因為我數據庫中沒有對應數據，所以沒顯示，這里我加上一條數據后，再次執行。數據顯示出來了！