ASP.NET MVC使用EasyUI的datagrid多选提交保存教程
2024-07-10 12:41:40
供稿：网友
需要实现EasyUI的datagrid组件加入选择checkbox列，并提交后台批量添加的功能，页面代码如下：
代码如下:
<script language="javascript" type="text/javascript">
$(function() {
//searchbox
$('#selectgoods-keywords').searchbox({
searcher: function(val, name) {
searchInfo(val);
}
});
//datagrid
$('#selectgoods-grid').datagrid({
url: '/Goods/List',
pageNumber: 1,
pageSize: 20,
pageList: [20, 40, 60, 80, 100]
});
//form
});
function searchInfo(val){
// var keytype=$('#keyType').combobox('getValue');
var keytype = 'Goods_Name';
var keywords = val;
$('#selectgoods-grid').datagrid('reload', { keytype: keytype, keywords: keywords });
}
function saveSelectGoods() {
var ids = [];
var rows = $('#selectgoods-grid').datagrid('getSelections');
for (var i = 0; i < rows.length; i++) {
ids.push(rows[i].Identifier);
}
var selectsupplier = '<%=ViewData["supplier"] %>';
$.post('/SupplierGoods/SaveSelect', { supplier: selectsupplier, checks: ids.join(',') }, function(data) {
if (data) {
$('#goodslist-grid').datagrid('reload');
$('#goodsInfo-window').window('close');
} else {
alert('保存失败！');
}
}, 'json');
}
</script>
<div style="width:100%; height:100%">
<table id="selectgoods-grid" class="easyui-datagrid" fit="true" toolbar="#tlb_selectgoods_search" pagination="true"
rownumbers="true" fitColumns="true" idField="Identifier">
<thead>
<tr>
<th field="ck" checkbox="true"></th>
<th field="Identifier" hidden="true" width="0" editor="text">Id</th>
<th field="Goods_Name" width="100" editor="{type:'validatebox',options:{required:true}}">商品名称</th>
<th field="Chemistry" width="100" editor="{type:'validatebox',options:{required:true}}">化学指标</th>
<th field="Physical" width="100" editor="{type:'validatebox',options:{required:true}}">物理指标</th>
<th field="Partner_Name" width="50" editor="{type:'validatebox',options:{required:true}}">合作状态</th>
</tr>
</thead>
</table>
<div id="tlb_selectgoods_search">
商品名称：<input name="keywords" id="selectgoods-keywords" class="easyui-searchbox" /><a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:saveSelectGoods()">保存</a>
</div>
</div>
ASP.NET MVC的Controller代码如下：
代码如下:
/// <summary>
/// 多选商品添加
/// </summary>
/// <param name="supplier">供货商ID</param>
/// <returns></returns>
public ActionResult SelectGoods(string supplier)
{
ViewData["supplier"] = supplier;
return View();
}
/// <summary>
/// 保存批量添加的产品信息
/// </summary>
/// <param name="checks">选中的商品ID</param>
