dome11

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script src="./scripts/boot.js" type="text/javascript"></script>

</head>

<body>

    <div>

        <div style="width:700px;">

            <div class="mini-toolbar" style="border-bottom:0;padding:0px;">

                <table style="width:100%;">

                    <tr>

                        <td style="width:100%;">

                            <a class="mini-button" iconCls="icon-add" οnclick="addRow('category')">增加</a>

                            <a class="mini-button" iconCls="icon-remove" οnclick="removeRow('category')">删除</a>    

                        </td>

                    </tr>

                </table>          

            </div>

        </div>

        <div id="datagrid1" class="mini-datagrid" 

            style="width:700px;height:250px;"

            allowCellEdit="true" 

            allowCellSelect="true" 

            multiSelect="true">

            <div property="columns">

                <div type="checkcolumn"></div>                

                <div name="CategoryName" width="120" field="category" headerAlign="center" allowSort="true">类目

                    <input property="editor" required="true" class="mini-textbox" style="width:100%;" />

                </div>    

                <div width="120" property="editor" field="num" headerAlign="center" allowSort="true">数量

                    <input property="editor" class="mini-spinner" minValue="0" maxValue="1000000" style="width:100%;"/>

                </div>

            </div>

        </div>

        

        <div style="width:700px;margin-top: 20px;">

            <div class="mini-toolbar" style="border-bottom:0;padding:0px;">

                <table style="width:100%;">

                    <tr>

                        <td style="width:100%;">

                            <a class="mini-button" iconCls="icon-add" οnclick="addRow('type')">增加</a>

                            <a class="mini-button" iconCls="icon-remove" οnclick="removeRow('type')">删除</a>    

                        </td>

                    </tr>

                </table>          

            </div>

        </div>

        <div id="datagrid2" class="mini-datagrid" style="width:700px;height:250px;"

            allowCellEdit="true" 

            allowCellSelect="true"

            multiSelect="true">

            <div property="columns">

                <div type="checkcolumn"></div>             

                <div type="comboboxcolumn" name="CategoryName" field="category" headerAlign="center">类目

                    <input property="editor" class="mini-combobox" style="width:100%;" 

                        id="categoryCombobox"

                        textField="text" 

                        valueField="id" 

                        emptyText="请选择..."

                        allowInput="true" />          

                </div>

                <div headerAlign="center" field="type" allowSort="true">小类名称

                    <input property="editor" required="true" class="mini-textbox" style="width:100%;" />

                </div>

                <div headerAlign="center" field="num" allowSort="true">数量

                    <input property="editor" class="mini-spinner" minValue="0" maxValue="1000000" style="width:100%;"/>

                </div> 

                <div type="comboboxcolumn" field="origin" headerAlign="center">产地

                    <input property="editor" class="mini-combobox" style="width:100%;" 

                        id="originCombobox"

                        textField="text" 

                        valueField="id" 

                        emptyText="请选择..." 

                        allowInput="true" />

                </div>

            </div>

        </div>

        <div style="margin-top: 20px;">

            <a class="mini-button" οnclick="submit()">提交</a> 

        </div>

    </div>

    <script type="text/javascript">

        var data1 = [

            { category: '蔬菜', num: 123 }, 

            { category: '水果', num: 123 } 

        ];

        var data2 = [];

        var categoryList = []

        var originInit = [{id: '1', text: '山东'}, {id: '2', text: '沈阳'}, {id: '3', text: '北京'}, {id: '4', text: '湖北'}]

        var originList = []

        mini.parse();

        var grid1 = mini.get("datagrid1");

        var grid2 = mini.get("datagrid2");

        var combo1

        var combo2

        grid1.setData(data1);

        grid2.setData(data2);

        saveData()

        function addRow(type) { 

            var newRow

            if (type == 'category') {

                newRow = { category: '', num: '' };

                grid1.addRow(newRow, grid1.data.length);

                grid1.beginEditCell(newRow, "CategoryName");

            } else {

                newRow = { category: null, type: '', num: '', origin: null};

                grid2.addRow(newRow, grid2.data.length);

                grid2.beginEditCell(newRow, "CategoryName");

                combo1 = mini.get('categoryCombobox')

                combo1.setData(categoryList)

            }      

        }

        function removeRow(type) {

            var rows

            if (type == 'category') {

                rows = grid1.getSelecteds();

                if (rows.length > 0) {

                    grid1.removeRows(rows, true);                

                }

                saveData()

            } else {

                rows = grid2.getSelecteds();

                if (rows.length > 0) {

                    grid2.removeRows(rows, true);                

                }

                getOrigin()

            }

        }

        grid1.on("cellcommitedit", function (e) {

            if (e.field == "category") {

                if (!e.value.trim()) {

                    alert("类目不能为空");

                    e.cancel = true;

                }

            }

        });

        grid1.on("cellendedit",  function(e) { 

            saveData()

        })

        grid2.on("cellendedit",  function(e) {

            combo2 = mini.get('originCombobox')

            getOrigin(e.value)

        })

        grid2.on("cellbeginedit", function(e) {

            combo2 = mini.get('originCombobox')

            if (e.field == 'origin') {

                getOrigin(e.value)

            }

        })

        function getOrigin (cur) {

            originList = []

            let idArr = []

            grid2.data.forEach(function(val) {

                if (val.origin != cur) {

                    idArr.push(val.origin)

                }

            })

            console.log(idArr)

            for(var i = 0; i < originInit.length; i++) {

                if (idArr.length > 0) {

                    if (idArr.indexOf(originInit[i].id) == -1) {

                        originList.push(originInit[i])

                    } 

                } else {

                    originList.push(originInit[i])

                }

            }

            combo2.setData(originList)

        }

        function saveData() {  

            categoryList = []

            grid1.data.forEach(function(item, index) {

                categoryList.push({

                    id: index, text: item.category

                })

            })

        }

        function submit () {

            var obj = {}

            if (grid2.data.length > 0) {

                grid2.data.forEach(function(item){

                    if (obj[item.category]) {

                        obj[item.category] = obj[item.category] + item.num  

                    } else {

                        obj[item.category] = item.num

                    }

                })

                for (let i = 0; i < grid1.data.length; i++) {

                    if (obj[i] !== grid1.data[i].num) {

                        alert(grid1.data[i].category + '数量不一致')

                        break;

                    }   

                }

            }

        }

    </script>

</body>

</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值