NFine架構中jqgrid增加多選操作

于架構中沒有包含多選操作，一直想實作出來，今天改出來後發現項目中确實需要多選操作的地方不多，以後還是按需修改吧，保持整體風格的一緻。由于使用了jqgrid的插件，查了幾個api就搞定了，不多說，直接貼代碼，隻貼需要更改的地方

<style type="text/css">
    /*多選框高度位置樣式，寬度額外增加 31 */
    #gridList tr td input[type=checkbox] {
        margin-top:9px;
    }
</style>      

function btn_details() {
        var keyValue = $("#gridList").jqGridRowValueMul();
        if (keyValue.toString().indexOf(\',\') > -1) {
            $.modalAlert("請單獨選中要檢視的資料！","error");
            return;
        }
        $.modalOpen({
            id: "Details",
            title: "檢視物料",
            url: "/ProjectBudget/GoodsInf/Details?keyValue=" + keyValue,
            width: "800px",
            height: "650px",
            btn: null,
        });
    }      

修改 framework-ui.js 檔案，新增兩個方法，在需要實作多選操作的頁面中調用。

//多選模式下新增方法 擷取選中多選的值
$.fn.jqGridRowValueMul = function () {
    var $grid = $(this);
    return $grid.jqGrid("getGridParam", "selarrrow")
}      

//多選模式下新增方法
$.fn.dataGridMul = function (options) {
    var defaults = {
        datatype: "json",
        autowidth: true,
        rownumbers: true,
        shrinkToFit: false,
        gridview: true
    };
    var options = $.extend(defaults, options);
    var $element = $(this);
    options["onSelectRow"] = function () {
        var $operate = $(".operate");
        var SelectItem = $(this).jqGrid("getGridParam", "selrow");
        if (SelectItem != undefined && SelectItem != null && SelectItem.length > 0) {
            $operate.animate({ "left": 0 }, 200);
            //指派判斷已選中多少項
            var TempCount = $(\'#gridList input[type=checkbox]:checked\').length;    
            $(".first").find("span").text(TempCount);
        } else {
            $operate.animate({ "left": \'-100.1%\' }, 200);
        }
        $operate.find(\'.close\').click(function () {
            $operate.animate({ "left": \'-100.1%\' }, 200);
        })
    };
    options["onSelectAll"] = function () {
        var $operate = $(".operate");
        var SelectItem = $(this).jqGrid("getGridParam", "selrow");
        if (SelectItem != undefined && SelectItem != null && SelectItem.length > 0) {
            $operate.animate({ "left": 0 }, 200);
            //指派判斷已選中多少項
            var TempCount = $(\'#gridList input[type=checkbox]:checked\').length;
            $(".first").find("span").text(TempCount);
        } else {
            $operate.animate({ "left": \'-100.1%\' }, 200);
        }
        $operate.find(\'.close\').click(function () {
            $operate.animate({ "left": \'-100.1%\' }, 200);
        })
    };
    $element.jqGrid(options);
};      

var $gridList = $("#gridList");
        $gridList.dataGridMul({
            url: "/ProjectBudget/GoodsInf/GetGridJson",
            height: $(window).height() - 128,
            colModel: [
                { label: "主鍵", name: "F_Id", hidden: true, key: true },
                { label: \'物料名稱\', name: \'GoodsName\', width: 110, align: \'left\' },
                { label: \'所屬分類\', name: \'GoodsStyleName\', width: 110, align: \'left\' },
                { label: \'管家婆編号\', name: \'GjpNO\', width: 109, align: \'left\' },
                { label: \'規格型号\', name: \'GoodsSpec\', width: 120, align: \'left\' },
                { label: \'機關\', name: \'UnitName\', width: 80, align: \'center\' },
                { label: \'品牌\', name: \'GoodsBand\', width: 120, align: \'left\' },
                { label: \'供貨廠家\', name: \'Supplier\', width: 120, align: \'left\' },
                { label: \'庫存\', name: \'StockReal\', width: 80, align: \'center\' },
                {
                    label: "有效", name: "F_EnabledMark", width: 60, align: "center",
                    formatter: function (cellvalue) {
                        return cellvalue == 1 ? "<i class=\"fa fa-toggle-on\"></i>" : "<i class=\"fa fa-toggle-off\"></i>";
                    }
                },
                { label: \'排序\', name: \'F_SortCode\', width: 60, align: \'center\' }
            ],
            pager: "#gridPager",
            multiselect: true,
            sortname: \'GoodsStyleID asc,F_SortCode asc\',
            viewrecords: true
        });      

預設修改和檢視不允許多選，彈框進行提示，對全選操作進行了勾選項目數量的指派，剩下就是背景修改删除的方法，相容帶 , 的參數進行操作。最後提醒還是要按需進行使用，不是每個頁面都需要或者适合多選操作。