Easyui在行编辑

最新推荐文章于 2023-07-27 17:16:28 发布

原创最新推荐文章于 2023-07-27 17:16:28 发布 · 315 阅读

CC 4.0 BY-SA版权

本文介绍了在Easyui中进行行编辑时如何初始化下拉框的方法。通过控制器Actions，将数据分别存储到ViewBag的Sizes和Colors属性中，然后在前端展示。GetSize方法获取所有尺码信息，GetColor方法获取所有颜色信息，两者都通过JsonConvert序列化并传递到视图。

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Shop</title>
<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>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/myjqueryform.js"></script>
<script type="text/javascript">
$(function () {
var colors = eval('(@Html.Raw(ViewBag.Colors))');
var sizes = eval('(@Html.Raw(ViewBag.Sizes))');
$("#datalist").datagrid({
fit: true,
title: '库存数量',
border: false,
striped: true,
rownumbers: true,
columns: [[
{ title: '编号', field: 'ID', halign: 'center', align: 'center', width: 230, sortable: true, hidden: true }
, { title: '商品名称', field: 'Name', halign: 'center', align: 'center', width: 200, sortable: true }
, {
field: 'ColorID', title: '颜色', width: 230,
formatter: function (value, row, index) {
//格式化性别
for (var i = 0; i < colors.length; i++) {
if (value == colors[i].id) {
return colors[i].Color;
}
}
},
editor: {
type: 'combobox',
options: {
valueField: 'id',
textField: 'Color',
data: colors,
required: true
}
}
}
, {
field: 'SizeID', title: '尺码', width: 230,
formatter: function (value, row, index) {
//格式化性别
for (var i = 0; i < sizes.length; i++) {
if (value == sizes[i].id) {
return sizes[i].Size;
}
}
},
editor: {
type: 'combobox',
options: {
valueField: 'id',
textField: 'Size',
data: sizes,
required: true
}
}
}
, {
field: 'Number', title: '入库数量', width: 230, editor: { type: 'validatebox', options: { required: true } }
},
{
title: '操作',
field: 'action',
halign: 'center',
align: 'center',
width: 350,
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>";
}
}
}
]],
onBeforeEdit: function (index, row) {
row.editing = true;
$('#datalist').datagrid('refreshRow', index);
},
//完成编辑后触发
onAfterEdit: function (index, row) {
row.editing = false;
$('#datalist').datagrid('refreshRow', index);
},
//取消编辑时触发
onCancelEdit: function (index, row) {
row.editing = false;
$('#datalist').datagrid('refreshRow', index);
}
});
});
var editRow;
//添加行
function addRow() {
//在grid末尾追加行
var row = $("#datalist").datagrid("appendRow", {});
//让新行处于编辑状态
var lastRowIndex = $("#datalist").datagrid("getRows").length - 1;
$("#datalist").datagrid('updateRow', {
index: lastRowIndex,
row: {
Name: $("#Name").val(),
}
})
$("#datalist").datagrid("beginEdit", lastRowIndex);
}
//编辑
function editRow(index) {
$("#datalist").datagrid("beginEdit", index);
}
//删除
function deleteRow(index) {

$.messager.confirm('确认', '确定要删除吗?', function (r) {
if (r) {
$("#datalist").datagrid("deleteRow", index);
}
});

}
//保存
function saveRow(index) {

$("#datalist").datagrid("endEdit", index);
}
//取消
function reDo(index) {

$("#datalist").datagrid('cancelEdit', index);
}
//批量提交方法
function save() {
var len = $("#datalist").datagrid('getChanges').length;//获取有变化的行的长度
if (len > 0) {
var inserted = $("#datalist").datagrid('getChanges', "inserted");//获取新添加的行
var deleted = $("#datalist").datagrid('getChanges', "deleted");//获取删除的行
var updated = $("#datalist").datagrid('getChanges', "updated");//获取修改的行
var data = {};
data.Inserted = inserted;
data.Deleted = deleted;
data.Updated = updated;
$.ajax({
url: '/Storage/Save',
type: 'POST',
data: JSON.stringify(data),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
alert(msg);
$("#fm").form("reset");
$("#datalist").datagrid("loadData", []);
}
});
}
else {
alert("没有发生变化的数据！");
return;
}
}
</script>
</head>
<body class="easy-layout" style="margin:4px;height:99%;">
<div data-options="region:'center'">
<div style="height:500px;">
<a class="easyui-linkbutton" iconcls="icon-add" onclick="addRow();">添加</a>
<a class="easyui-linkbutton" iconcls="icon-save" onclick="save();">全部提交</a>
<table id="datalist"></table>
</div>
</body>

</html>

编辑时初始化下拉框Controllers方法

public ActionResult NewShop()将数据存到ViewBag中传到前台
{
ViewBag.Sizes = GetSize();
ViewBag.Colors = GetColor();
return View();
}
//得到所有鞋子的尺码
public string GetSize()
{
SizeLableBll slbll = new SizeLableBll();
return JsonConvert.SerializeObject(slbll.Search(x => true).Select(x => new { id = x.ID, Size = x.ShopSize }).ToList()).Replace(""", "\"");
}
//得到所有的颜色
public string GetColor()
{
ColorLableBll clbll = new ColorLableBll();
return JsonConvert.SerializeObject(clbll.Search(x => true).Select(x => new { id = x.ID, Color = x.ShopColor }).ToList()).Replace(""", "\"");
}