easyui---- 行内编辑、删除
效果图:
需要引用脚本:
<link href="~/UILibs/easyui/themes/default/easyui.css" rel="stylesheet" />
<link href="~/UILibs/easyui/themes/icon.css" rel="stylesheet" />
<link href="~/Css/css.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/UILibs/easyui/jquery.easyui.min.js"></script>
<script src="~/UILibs/easyui/locale/easyui-lang-zh_CN.js"></script>
列表:
<body>
<a class="easyui-linkbutton" iconcls="icon-add" onclick="addRow();">添加</a>
<a class="easyui-linkbutton" iconcls="icon-save" onclick="save();">批量提交</a>
<table id="tb">
</table>
</body>
显示字段内容:
$("#tb").datagrid({
fit: true,
title: '行内编辑测试',
border: false,
striped: true,
data: persons,
rownumbers: true,
columns: [[
{
title: '编号', field: 'ID',halign: 'center',align: 'center',width:100,
editor: { type: 'validatebox', options: { required: true } }
},
{
title: '姓名',field: 'Name',halign: 'center',align: 'center',width: 150,
editor: { type: 'validatebox', options: { required: true } }
},
{
title: '年龄',field: 'Age',halign: 'center',align: 'center',width: 100,
editor: { type: 'validatebox', options: { required: true } }
},
{
title: '性别',field: 'Sex',halign: 'center',align: 'center',width: 150,
formatter: function (value, row, index) {
//格式化性别
for (var i = 0; i < sexs.length; i++) {
if (value == sexs[i].id) {
return sexs[i].name;
}
}
},
editor: {
type: 'combobox',
options:
{
valueField: 'id',
textField: 'name',
data: sexs,
required: true
}
}
},
{
title: '操作',field: 'action',halign: 'center',align: 'center',width: 200,
formatter: function (value,row,index) {
if (row.editing == true) {
return "<a href='#' onclick='saveRow(" + index + ");'>确定</a> <a href='#' onclick='reDo(" + index + ");'>取消</a>";
}
else {
return "<a href='#' style='cursor:pointer' onclick='editRow(" + index + ");'>编辑</a> <a href='#' onclick='deleteRow(" + index + ");'>删除</a>";
}
}
}
]],
编辑时文本框的格式在editor{type:"",options:""}设置
前台获取的数据(也可以后台调数据):
$(function () {
var persons = [
{ ID: 1, Name: "aaa", Age: 20, Sex: "0" },
{ ID: 2, Name: "bbb", Age: 21, Sex: "1" },
{ ID: 3, Name: "ccc", Age: 22, Sex: "0" },
{ ID: 4, Name: "ddd", Age: 23, Sex: "1" }
];
var sexs = [{ id: 0, name: "男" }, { id: 1, name: "女" }];
添加行:
编辑触发事件(可以参考easyui-api文档datagrid):
编辑、删除、保存:
提交:
UI层Model:
controller:
public ActionResult Save(Persons ps)
{
return null;
}