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

关于Easyui 可编辑的数据表格中的计算

2016-08-24 17:16 232 查看
最近项目中遇到的问题,在网上找了很多资料,现在也把我遇到的问题和解决方案存下来

代码如下:

html:

  <table id="dk"></table>

JS:

  $("#dk").datagrid('endEdit', editRow);

                var rows = $("#dk").datagrid('getChanges');

            var $dk = $('#dk');

            var editRow = undefined;

            $("#dk").datagrid({

                onClickRow: function (rowIndex, rowData) {

                    $(this).datagrid('unselectRow', rowIndex);

                },

                columns: [[

                     { field: 'asda', title: '名称', width: 120, checkbox: true },

                    {

                        field: 'ProClassId',

                        title: '大类',

                        width: 100,

                        formatter: unitformatter,

                        editor: {

                            type: 'combobox',

                            options: {

                                data: productType,

                                valueField: 'ProClassId',

                                textField: 'ProClassName',

                                editable: false,

                            }

                        }

                    },

                    {

                        field: 'ProductBrand',

                        title: '品牌',

                        width: 120,

                        editor: {

                            type: 'text',

                            options: {

                            },

                        }

                    },

                     { field: 'ProductName', title: '名称', width: 120, editor: { type: 'text', options: {}, } },

                    { field: 'Ordercount', title: '数量', width: 60, editor: { type: 'numberbox', options: { min: 0 } } },

                    { field: 'SuggestPrice', title: '建议价格', width: 80, editor: { type: 'numberbox', options: { min: 0, precision: 2 } } },

                    { field: 'Orderprice', title: '实际价格', width: 80, editor: { type: 'numberbox', options: { min: 0, precision: 2 } } },

                    {

                        field: 'Subtotal', title: '小计', width: 80, editor: { type: 'numberbox', options: { min: 0, precision: 2 } }

                    },

                    { field: 'CostPrice', title: '成本价', width: 80, editor: { type: 'numberbox', options: { min: 0, precision: 2 } } },

                ]],

                toolbar: [{

                    text: '添加', iconCls: 'icon-add', handler: function () {

                        if (editRow != undefined) {

                            $("#dk").datagrid('endEdit', editRow);

                        }

                        if (editRow == undefined) {

                            $("#dk").datagrid('insertRow', {

                                index: 0,

                                row: {}

                            });

                            $("#dk").datagrid('beginEdit', 0);

                            editRow = 0;

                            obj = document.getElementsByName("checkbox");

                            var oText = document.getElementById("isd");

                            check_val = [];

                            for (k in obj) {

                                if (obj[k].checked)

                                    check_val.push(obj[k].value);

                            }

                            oText.value = check_val.join(",");

                        }

                        //获取第一行        *关键代码*

                        var editors = $('#dk').datagrid('getEditors', 0);

                        var priceEditor = editors[3];

                        var amountEditor = editors[5];

                        var costEditor = editors[6];

                        priceEditor.target.bind('change', function () {

                            calculate();

                        });

                        amountEditor.target.bind('change', function () {

                            calculate();

                        });

// 计算方法

                        function calculate() {

                            var cost = priceEditor.target.val() * amountEditor.target.val();

                            $(costEditor.target).numberbox('setValue', cost);

                        }

                    }

                },

                {

                    text: '删除', iconCls: 'icon-remove', handler: function () {

                        $('#dk').datagrid('cancelEdit', editRow);

                        var row = $('#dk').datagrid('getSelected');

                        if (row) {

                            $.messager.confirm("警告", "你将删除一行", function (r) {

                                if (r) {

                                    var rowIndex = $('#dk').datagrid('getRowIndex', row);

                                    $('#dk').datagrid('deleteRow', rowIndex);

                                }

                            })

                        } else {

                            $.messager.alert("提示", "请先选择一行再点击删除")

                        }

                        editRow = undefined;

                        $('#dk').datagrid('uncheckAll');

                    }

                }],

                //在用户完成编辑一行的时候触发

                onAfterEdit: function (rowIndex, rowData, changes) {

                    editRow = undefined;

                },

                //在用户双击一个单元格的时候触发。 

                onDblClickRow: function (rowIndex, rowData) {

                    if (editRow != undefined) {

                        $("#dk").datagr
4000
id('endEdit', editRow);

                    }

                    if (editRow == undefined) {

                        $("#dk").datagrid('beginEdit', rowIndex);

                        editRow = rowIndex;

                    }

                },

                //在用户点击一行的时候触发

                onClickRow: function (rowIndex, rowData) {

                    if (editRow != undefined) {

                        $("#dk").datagrid('endEdit', editRow);

                    }

                }

            })
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  easyui 数据 计算