关于easy可编辑表格树表格刷新和加载状态问题

最新推荐文章于 2024-07-11 00:15:48 发布

原创最新推荐文章于 2024-07-11 00:15:48 发布 · 826 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#url

easyui 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了在表格树中开启行内编辑的方法，利用treegrid的beginEdit实现编辑功能。编辑完成后，通过getChanges获取修改的数据，支持inserted, deleted, updated等操作。在数据更新后，若未刷新页面，后续getChanges会包含之前操作的数据。需要注意，如果数据源不是url，而是json，将无法自动更新。" 52008120,893234,Netty解析HTTP协议原理详解,"['netty', 'http', '网络编程', '压缩', '协议解析']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//树表格定义
$('#showListGrid').treegrid({
                    url: initTreeGrid,
                    idField: 'id',
                    treeField: 'name',
                    fitColumns: true,
                    rownumbers: true,
                    nowrap: true,
                    showFooter: true,
                    collapsible: true,
                    height: 'auto',
                    remoteSort: false,
                    pagination: true,
                    singleSelect: true,
                    columns: [
                        [{
                                title: 'id',
                                field: 'id',
                                width: 200,
                                hidden: true

                            }, {
                                field: 'ck',
                                title: '选择',
                                checkbox: "true",
                                align: 'left'
                            }, {
                                title: '计划名称',
                                field: 'name',
                                width: 100
                            }, {
                                title: '计划类型',
                                field: 'typeName',
                                width: 140
                            }, {
                                field: 'startDate',
                                title: '实际开始时间',
                                align: 'left',
                                width: 100,
                            }, {
                                field: 'endDate',
                                title: '实际完成时间',
                                align: 'left',
                                width: 100,
                            }, {
                                field: 'weekCompleteRatio',
                                title: '本周完成百分比(%)',
                                align: 'left',
                                width: 100,
                                editor: {
                                    type: 'numberbox',
                                    options: {
                                        precision: 2, //精度
                                        min: 0, //允许最小值
                                        required: "true",
                                        prompt: "输入"
                                    }
                                }
                            }, {
                                title: '累记完成百分比(%)',
                                field: 'completeRatio',
                                width: 100,
                            }, {
                                title: '工程量单位',
                                field: 'metric',
                                width: 100,
                            },
                            {
                                title: '工程量',
                                field: 'quantity',
                                width: 100,
                            }, {
                                field: 'planStartDate',
                                title: '计划开始时间',
                                align: 'left',
                                width: 100,
                            }, {
                                field: 'planEndDate',
                                title: '计划完成时间',
                                align: 'left',
                                width: 100,
                            }
                        ]
                    ]
                });

对于表格树开启行编辑不在做过多描述,使用treegrid的beginEdit方法就可以开启行内编辑.
当编辑完成时要获取编辑的行数据,我这里使用的是:var updatedRows = $('#showListGrid').treegrid('getChanges', "updated")
可以获取到你只是修改的数据,可以根据getChanges的参数,获取指定值,可以使用的值有：inserted,deleted,updated等.
当进行第一次更新数据之后,如果你没有刷新页面或者是提交表格树状态,使用上边的getChanges方法,获取的数据会有上次操作的数据,这里需要使用$("#showListGrid").treegrid('acceptChanges'); //提交表格树状态,再使用$("#showListGrid").treegrid('reload');刷新表格,注意:如果你不是使用url作为表格树的数据源,而是使用json格式的数据
那么就不能自动更新。