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

});