easyui 可编辑表格

bind: function (winSize) {
        var text = parent.$('#tree_struct').tree('getSelected');
        var pid = parent.$('#tree_struct').tree('getParent', text.target);
        var part = parent.$('#tree_struct').tree('getParent', pid.target);
        var s = pid.text.indexOf('|');
        var p = part.text.indexOf('|');
        $('#list').datagrid({
            url: actionURL + "?elementid=" + $('#hideElementId').val() + '&bid=' + parent.$('#hideBridgeId').val() + '&struct=' + escape(pid.text.substr(0, s)) + '&part=' + escape(part.text.substr(0, p)),
            toolbar: '#toolbar',
            title: "构件病害列表",
            iconCls: 'icon icon-list',
            width: winSize.width,
            height: winSize.height,
            nowrap: false,      //折行
            rownumbers: true,   //行号
            striped: true,      //隔行变色
            idField: 'KeyId',   //主键
            singleSelect: true, //单选
            frozenColumns: [[]],
            columns: [[
       {
           title: '损害类型', field: 'Defect_des', width: 200, formatter: function (value, row, index) {
               return '<a href="#" style="color:green;" οnclick="CRUD.viewDefect(\'' + row.DefectTypeID + '\')">' + value + '</a>';
           }
       },
                { title: '损害数量', field: 'count_n', width: 100 },
       {
           title: '程度', field: 'DefectGradeDes', width: 100, formatter: function (value, row, index) {
               for (var i = 0; i < defectLV.length; i++) {
                   if (defectLV[i].text  == value) return defectLV[i].text;
               }
               return value;
           },
           editor: {
               type: 'combobox',
               options: {
                   data: defectLV,
                   valueField: 'id',
                   textField: 'text',
                   required: true
               }
           }
       },
                
       {
           title: '扣分值DP', field: 'DP', width: 100
       },
                {
                    title: 'Wij', field: 'wly', width: 100, formatter: function (value, row, index) {
                        var newvalue = Math.round(value * 1000) / 1000;
                        return newvalue;
                    }
                },
                {
                    title: 'Uij', field: 'U', width: 100, formatter: function (value, row, index) {
                        var newvalue = Math.round(value * 1000) / 1000;
                        return newvalue;
                    }
                }
            ]],
            pagination: true,
            pageSize: PAGESIZE,
            pageList: [20, 40, 50],
            onBeforeLoad: function () {
                $(this).datagrid('rejectChanges');
            },
            //onLoadSuccess: function (data) {
               // var rownum=$('#list').datagrid('getRows').length;
                //此处用于使单元格在加载完毕后就处于可编辑状态
               // for (var i = 0; i < rownum; i++) {
                    //$('#list').datagrid('beginEdit', i);
                //}
            //},
            onClickRow: function (rowIndex, row) {
                $.ajax({
                    url: actionURL + '?' + createParam('assLevel', row.DefectTypeID),
                    type: 'post',
                    async:false,
                    success: function (d) {
                        if (d) {
                            defectLV = eval(d);
                        }
                    }
                })
                if (lastIndex != -1) {
                    $('#list').datagrid('endEdit', lastIndex);
                }
                $('#list').datagrid('beginEdit', rowIndex);
                lastIndex = rowIndex;
                var ed = $('#list').datagrid('getEditor', { index: rowIndex, field: "DefectGradeDes" });
               
                $(ed.target).combobox({
                    data: defectLV,
                    valueField: 'id',
                    textField: 'text',
                    required: true,
                    width:100
                });
            },
            onBeforeEdit: function (rowIndex, row) {
                row.editing = true;
                
                //var value = $(ed.target).combobox('getValue');
            },
            onAfterEdit: function (index, row) {
                row.editing = false;
                $('#list').datagrid('refreshRow', index);


                var query = createParam('edit', row.KeyId);
                var hUrl = actionURL + '?asslevel=' + escape(row.DefectGradeDes) + '&bid=' + parent.$('#hideBridgeId').val();
                jQuery.ajaxjson(hUrl, query, function (d) {
                    if (parseInt(d) > 0) {
                        msg.ok('修改成功!');
                        grid.reload();
                    } else {
                        MessageOrRedirect(d);
                    }
                });
            }
        });
    },
    getSelectedRow: function () {
        return $('#list').datagrid('getSelected');
    },
    reload: function () {
        $('#list').datagrid('clearSelections').datagrid('reload', { filter: '' });
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
easyui vue 数据表格下拉框的实现步骤如下: 1. 引入 easyui 和 vue 相关的 js 和 css 文件。 2. 创建一个 vue 实例,并定义一个数组用于存放下拉框的选项数据。 3. 在 HTML 中使用 easyui 的 datagrid 组件,并设置 columns 属性,其中需要使用 formatter 属性将某一列的数据转换为下拉框。 4. 在 formatter 中使用 easyui 的 combobox 组件,并将选项数据绑定到该组件中。 5. 在 vue 实例中定义一个方法,用于获取下拉框的选项数据,并将其赋给选项数据数组。 6. 在 created 钩子函数中调用该方法,以获取初始的选项数据。 代码示例: HTML: ``` <div id="app"> <table id="datagrid" class="easyui-datagrid" :data="data"> <thead> <tr> <th field="name" width="50%">Name</th> <th field="gender" width="50%" formatter="genderFormatter">Gender</th> </tr> </thead> </table> </div> ``` JavaScript: ``` var app = new Vue({ el: '#app', data: { data: [] }, methods: { getGenderOptions: function() { // 获取下拉框选项数据 return [ { value: 'M', text: 'Male' }, { value: 'F', text: 'Female' } ]; }, genderFormatter: function(value, row) { // 将数据转换为下拉框 var options = this.getGenderOptions(); var selectedValue = row.gender; var html = '<select class="easyui-combobox" style="width:100%;" data-options="'; html += 'valueField: \'value\','; html += 'textField: \'text\','; html += 'data: ' + JSON.stringify(options) + '"'; html += '>'; for (var i = 0; i < options.length; i++) { var option = options[i]; var selected = option.value === selectedValue ? 'selected' : ''; html += '<option value="' + option.value + '" ' + selected + '>' + option.text + '</option>'; } html += '</select>'; return html; } }, created: function() { // 初始化数据 this.data = [ { name: 'John Doe', gender: 'M' }, { name: 'Jane Doe', gender: 'F' } ]; // 获取下拉框选项数据 var options = this.getGenderOptions(); // 在 easyui 加载完成后将选项数据绑定到下拉框中 $('#datagrid').datagrid({ onLoadSuccess: function(data) { $.each(data.rows, function(index, row) { var $combobox = $(this).datagrid('getPanel').find('td[field="gender"] div select'); $combobox.combobox('loadData', options); $combobox.combobox('setValue', row.gender); }); } }); } }); ``` 需要注意的是,在 easyui 加载完成后,需要将选项数据绑定到下拉框中,这里使用了 jquery 的 each 方法遍历每一行数据,并通过 easyui 的 combobox 组件将选项数据绑定到对应的下拉框中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值