C# jQGrid自定义按钮新增保存取消以及使用bootstrap-select

功能说明

大概功能介绍：自定义三个按钮：新增、保存、取消。
			点击新增按钮，列表新增一行空行，可多次点击。
			然后点击保存按钮保存。
			选中编辑行，点击取消按钮，行取消。

难点：在列表汇总嵌套bootstrap-select  (平台备注)

JQuery Grid 配置情况

$("#jg_outinBnak").jqGrid({
                    //caption:'银行流水记录',
                    url: '<%=ajaxUrl %>',
                    mtype: "GET",
                    datatype: "json",
                    styleUI: "Bootstrap",
                    colModel: [
                        { label: 'id', name: 'id', width: 50, key: true, hidden: true, },
                        { label: 'group_number', name: 'group_number', width: 20, hidden: true, },
                        { label: '类型', name: 'record_type', width: 50, },
                        //{ label: '银行账户', name: 'bank_account', width: 250, },
                        //{ label: '操作者', name: 'operation_namager_name', width: 150, },
                        { label: '账户', name: 'acc_name', width: 200, },
                        {
                            label: '账单日期', name: 'bill_date', width: 180, editrules: { required: true }, 
                            editable: true, editoptions: {
                                dataInit: function (el) {
                                    $(el).click(function () {
                                        WdatePicker({
                                            dateFmt: 'yyyy-MM-dd HH:mm:ss',
                                            
                                        });
                                    });
                                },
                            },
                        },
                        { label: '科目', name: 'bill_subject', width: 150, editable: true },
                        { label: '收入', name: 'bill_income', width: 100, editable: true, editrules: { required: true },  },
                        { label: '支出', name: 'bill_pay', width: 100, editable: true,  },
                        { label: '余额', name: 'balance', width: 100, },
                        {
                            label: '事由', name: 'reasonInfo', width: 150, editable: true, edittype: "select", editoptions: {
                                value: "1:资金归集;2:账户出入金;3:佣金归集",
                            },
                        },
                        {
                            label: '平台备注', name: 'remarks', width: 350, editable: true,
                            edittype: "select",
                            editoptions: {
                                value: getOptionValue(),
                                dataInit: function (elem) {

                                    let _rowid = $(elem).attr("rowid").slice(3)                                 
                                    let _top = 10 + 50 * (parseInt(_rowid) - 1);
                                    console.log(_rowid);
                                    console.log(_top);
                                   
                                    $(elem).addClass('selectpicker ');
                                    $(elem).data('live-search', 'true');
                                    $(elem).selectpicker();

                                    
                                    $(elem).next().css("width", "300px");
                                    $(elem).next().css("position", "absolute");
                                    $(elem).parent().css("padding-bottom","40px");
                                    //$(elem).next().css("top", _top+"px");    
                                    
                                }

                            }
                        },
                        { label: '特殊情况说明', name: 'special_info', width: 150, editable: true  },
                        { label: '操作', name: 'operation', width: 140,    formatter: operationFormatter,  },

                    ],   
                    viewrecords: true,
                    //colMenu: true,   // 开启快捷菜单

                    width: "100%",
                    shrinkToFit: false,   // 是否自适应表格宽度
                    autowidth: true,    // 自定义调整宽度 需要实现函数：setGridWidth

                    height: 600,
                    rowNum: 30,
                    jsonReader: {
                        root: 'rows',      //加载的数据
                        page: 'page',       //当前页
                        total: 'total',     // 很重要 定义了 后台返回的总页数名称。
                        records: 'totalCount', // 后台返回的总数据条数；     以上5个参数一定要跟后台返回的json格式数据中，名称相同
                        repeatitems: false,
                    },
                    pager: "#jgPager_outinBnak",
                    //multiselect: true,  //复选框 
                    restoreAfterSelect: false,   // 取取消 还原行

                    subGrid: true,
                    // 子表展开是触发的事件
                    subGridRowExpanded: function (subgrid_id, row_id) {
                        var rowData = $("#jg_outinBnak").jqGrid('getRowData', row_id);
                        var subgrid_table_id;
                        subgrid_table_id = subgrid_id + "_sub";  
                        var subgrid_pager_id;
                        subgrid_pager_id = subgrid_id + "_page_sub";

                        $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class= 'scroll' ></table > <div id='" + subgrid_pager_id + "'class='scroll'></div>"); 
                        $("#" + subgrid_table_id).jqGrid({

                            url: '/control/forecast_ajax.ashx?action=get_asset_bank_record_history_list&groupNumber=' + rowData.group_number,
                            mtype: "GET",
                            datatype: "json",
                            styleUI: "Bootstrap",
                            colModel: [
                                { label: 'id', name: 'id', width: 50, key: true, hidden: true,  },
                                { label: '类型', name: 'record_type', width: 50, },
                                //{ label: '银行账户', name: 'bank_account', width: 250, },
                                //{ label: '操作者', name: 'operation_namager_name', width: 150, },
                                { label: '账户', name: 'acc_name', width: 200,  },
                                { label: '账单日期', name: 'bill_date', width: 150,  },
                                { label: '科目', name: 'bill_subject', width: 150,   },
                                { label: '收入', name: 'bill_income', width: 100,  },
                                { label: '支出', name: 'bill_pay', width: 100,  },
                                { label: '余额', name: 'balance', width: 100,  },
                                { label: '平台备注', name: 'remarks', width: 150,  },
                                { label: '特殊情况说明', name: 'special_info', width: 150,  },
                                {
                                    label: '审核', name: 'passInfo', width: 60,                                   
                                    formatter: function (cellvalue, options, rowObject) {
                                        return cellvalue == '待审核' && <%=isAdminLevel(prefix,DTEnums.ActionEnum.Audit.ToString()) ? "true" : "false" %> ? '<a style="color: blue;" href="javascript:;" οnclick="ShowMaxDialog(\'审核\',\'project/popwindows/pop_bank_bill_pass_audit.aspx?id=' + rowObject.id + '\')">待审核</a>' : cellvalue
                                    },
                                },                      
                            ],
                            viewrecords: true,
                            width: "100%",
                            height: "100%",
                            rowNum: 5,
                            jsonReader: {
                                root: 'rows',      //加载的数据
                                page: 'page',       //当前页
                                total: 'total',     // 很重要 定义了 后台返回的总页数名称。
                                records: 'totalCount', // 后台返回的总数据条数；     以上5个参数一定要跟后台返回的json格式数据中，名称相同
                                repeatitems: false,
                            },
                            pager: "#" + subgrid_pager_id,
                           
                        });

                    },
                    subGridRowColapsed: function (subgrid_id, row_id) {
                        //console.log(subgrid_id, row_id);
                    },
                   
                });

                // 自定义操作列
                function operationFormatter(cellvalue, options, rowdata) {
                    return rowdata.waitPassCount <= 0 && <%=isAdminLevel(prefix,DTEnums.ActionEnum.Edit.ToString()) ? "true" : "false" %> ? '<a style="color: blue;" href="javascript:;" οnclick="ShowMaxDialog(\'修改\',\'project/popwindows/pop_add_bank_bill_assets_record.aspx?action=Edit&rid=' + rowdata.id + '\')">编辑</a>' : '';
                }               

                // 获取账户列表
                function getOptionValue() {
                    var options = "";
                    var i = 0;
                    $.ajax({
                        async: false,  //千万要记住加这个属性配置
                        type: "post",
                        url: "/control/forecast_ajax.ashx?action=search_account_list&search=",
                        success: function (data) {
                            options = data;
                        }
                    });
                    return options;
                }
                


                var addIds = new Array();  // 存放新行 rowId
                // 新增多行
                $(document).on('click', '#Js_AddRows', function () {

                    let dataRow = {
                        id: "",
                        record_type: "",
                        acc_name: "",
                        bill_date: "<%=DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")%>",
                        bill_subject: "",
                        bill_income: "0",
                        bill_pay: "-0",
                        reasonInfo: "",
                        remarks: "",
                        special_info: "",
                    };

                    $("#jg_outinBnak").jqGrid('addRow', {
                        rowID: null,
                        initdata: dataRow,
                        position: "first"
                    }); 

                    var rowid = $("#jg_outinBnak").jqGrid("getGridParam", "selrow");
                    //console.log(rowid);
                    addIds.push(rowid);

                }).on('click', '#Js_SaveRows', function () {   // 保存
                    var _addCount = 0;
                    var _fCount = 0;

                    $.each(addIds, function (index, value) { 

                        let _accId = $("select[id='" + value+"_remarks']").val();
                        //console.log(_v);

                        $("#jg_outinBnak").saveRow(value, false, 'clientArray');
                        var rowData = $("#jg_outinBnak").jqGrid('getRowData', value); //参数rowId 行号

                        //console.log(rowData);

                        $.ajax({
                            type: "post",
                            url: "/control/forecast_ajax.ashx?action=add_asset_bank_record_json&bankId=<%=bankId%>&accId=" + _accId,
                            data: rowData,
                            async: false,  // 同步
                            success: function (data) {
                                if (data == 'success') {
                                    ++_addCount;
                                } else {
                                    ++_fCount;
                                }
                            },
                            error: function (data) {
                                console.log("error");
                                //失败
                            }
                        });

                    });

                    alert("成功添加" + _addCount + "条，失败" + _fCount + "条");
                    window.location.reload();
                    return false;

                }).on('click', '#Js_CancelRows', function () {  // 取消
                    var id = $('#jg_outinBnak').jqGrid('getGridParam', 'selrow');
                    $('#jg_outinBnak').jqGrid('restoreRow', id);   

                });