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>
