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,
             "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",
        auto 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',  110, align: 'left' },
                { label: '所属分类', name: 'GoodsStyleName',  110, align: 'left' },
                { label: '管家婆编号', name: 'GjpNO',  109, align: 'left' },
                { label: '规格型号', name: 'GoodsSpec',  120, align: 'left' },
                { label: '单位', name: 'UnitName',  80, align: 'center' },
                { label: '品牌', name: 'GoodsBand',  120, align: 'left' },
                { label: '供货厂家', name: 'Supplier',  120, align: 'left' },
                { label: '库存', name: 'StockReal',  80, align: 'center' },
                {
                    label: "有效", name: "F_EnabledMark",  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',  60, align: 'center' }
            ],
            pager: "#gridPager",
            multiselect: true,
            sortname: 'GoodsStyleID asc,F_SortCode asc',
            viewrecords: true
        });

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