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
        });      

默认修改和查看不允许多选，弹框进行提示，对全选操作进行了勾选项目数量的赋值，剩下就是后台修改删除的方法，兼容带 , 的参数进行操作。最后提醒还是要按需进行使用，不是每个页面都需要或者适合多选操作。