您的位置：首页 > 产品设计 > UI/UE

easyui datagrid实现批量添加、删除、修改，列多对多动态配比

2013-05-14 19:54 996 查看

最近用easyui做了个商城的简单商品管理，商品属性防淘宝店面后台属性添加功能，分析给大家一下部分Demo

效果：

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>easyui datagrid实现批量操作商品</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../themes/icon.css" />
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
</head>
<body>
<div id="group">
<div id="groupys">
<input type="checkbox" id="ch_1" value="黑色" name="groups" />黑色    
<input type="checkbox" id="ch_2" value="红色" name="groups" />红色    
<input type="checkbox" id="ch_3" value="蓝色" name="groups" />蓝色
</div>
<hr />
<div id="groupcm">
<input type="checkbox" id="ch4" value="28" name="groupm" />28    
<input type="checkbox" id="ch5" value="29" name="groupm" />29    
<input type="checkbox" id="ch6" value="30" name="groupm" />30
</div>
<hr />
<input type="button" value="保存" onclick="getSave()" />
<hr />
</div>
<table id="dg" style="height:500px"></table>
</body>
</html>

js代码：

$(function () {
var lastIndex;
$("#dg").datagrid({
url: 'datagrid_datademo.json',
iconCls: 'icon-edit',
idField: 'id',
singleSelect: true,
columns: [[
{ field: 'id', title: 'ID', width: '40' },
{ field: 'ys', title: '颜色', width: '80', editor: 'text' },
{ field: 'cm', title: '尺码', width: '80', editor: 'text' },
{ field: 'mc', title: '名称', width: '100', editor: 'text' },
{ field: 'jg', title: '价格', width: '100', editor: 'numberbox' }
]],
onClickRow: function (rowIndex) {
if (lastIndex != rowIndex) {
$('#dg').datagrid('endEdit', lastIndex);
$('#dg').datagrid('beginEdit', rowIndex);
}
lastIndex = rowIndex;
},
onLoadSuccess: function (data) {
if (data.rows.length > 0) {
mergeCellsByField("dg", "ys");//合并单元格
}
}
});
});

//选择颜色和尺码
$("#group input").click(function () {
//声明数组用于暂时存放数据库中颜色和尺码
var colors = new Array();
var sizes = new Array();

var rows = $("#dg").datagrid("getRows");
var j = 0;
for (var i = rows.length - 1; i >= 0; i--) {//不能从前往后，应该从后往前循环。
if (typeof (rows[i].id) == "undefined") {
$("#dg").datagrid("deleteRow", i);
} else {
colors[j] = rows[j].ys;
sizes[j] = rows[j].cm;
j++;
}
}

$('#groupys input:checked').each(function () {
var yss = $(this).val();
$('#groupcm input:checked').each(function () {
for (var z = 0; z < colors.length; z++) {
if (colors[z] == yss && sizes[z] == $(this).val()) {
$.messager.alert('温馨提示', "颜色为【" + colors[z] + "】，尺码为【" + sizes[z] + "】已经存在", 'warning');
return;
}
}
$('#dg').datagrid('appendRow', { ys: yss, cm: $(this).val() });
});
});
});

//保存数据操作
function getSave() {
if ($("#dg").datagrid('getChanges').length) {
var inserted = $("#dg").datagrid('getChanges', "inserted");
var deleted = $("#dg").datagrid('getChanges', "deleted");
var updated = $("#dg").datagrid('getChanges', "updated");

var effectRow = new Object();
if (inserted.length) {
effectRow["inserted"] = JSON.stringify(inserted);
}
if (deleted.length) {
effectRow["deleted"] = JSON.stringify(deleted);
}
if (updated.length) {
effectRow["updated"] = JSON.stringify(updated);
}
$.post("servlet/commit.ashx?oper=edit", effectRow, function(rsp) {
if(rsp.status){
$.messager.alert("提示", "提交成功！");
$dg.datagrid('acceptChanges');
}
}, "JSON").error(function() {
$.messager.alert("提示", "提交错误了！");
});
}
}

源码下载地址：http://download.csdn.net/detail/vanehai/5377007

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： easyui datagrid 函数商品管理

相关文章推荐

新的分享

章节导航