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

最新推荐文章于 2024-04-17 09:51:17 发布

vaneHai

最新推荐文章于 2024-04-17 09:51:17 发布

阅读量2.8k

点赞数 1

文章标签： easyui datagrid 函数商品管理

本文链接：https://blog.csdn.net/vanehai/article/details/8927340

版权

最近用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="保存" οnclick="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