Easyui学习笔记（一）datagrid行编辑

最新推荐文章于 2025-05-19 21:48:24 发布

原创最新推荐文章于 2025-05-19 21:48:24 发布 · 8.5k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#学习笔记

博客围绕datagrid展开，介绍了其定义、设置，包括重点事件，还阐述了columns的重点属性、toolbar设置，最后讲解了行编辑的js实现，属于前端开发相关内容。

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

一、定义datagrid

<table id="grid"></table>

二、datagrid设置

重点事件：

在这里插入图片描述

     $('#grid').datagrid({
                iconCls: 'icon-forward',
                fit: true,
                border: false,
                rownumbers: true,
                striped: true,
                pageList: [2, 5, 10, 30, 50, 100],
                pagination: true,
                toolbar: toolbar,
                url: "/staff/query.action",
                idField: 'id',
                columns: columns,
                onCancelEdit:doCanceEdit,//取消编辑行触发
                onAfterEdit:doAfterEdit,//完成编辑行触发
                onDblClickRow: doDblClickRow,//双击行触发
                onBeforeEdit:doBeginEdit//编辑行时触发
            });

三、columns设置

重点属性：
在这里插入图片描述

var columns = [[{
            field: 'id',
            checkbox: true,
        }, {
            field: 'name',
            editor:{
                type:'text',//文本类型
                options: {
                    required: true //是必填项
                }},
            title: '姓名',
            width: 120,
            align: 'center'
        },{
            field: 'telephone',
            editor: {
                type:'numberbox',//数字类型
                options: {
                    required: true ,//是必填项
                    validType:'mobile'//验证方式，mobile为自定义验证
                }},
            title: '手机号',
            width: 120,
            align: 'center'
        }, {
            field: 'haspda',
            editor: {
            	type: 'checkbox', //复选框类型
           		 options: {
           		 		on: '1', //选中时所代表的值
           		 		off: '0' //未选中时所代表的值
           		 		}
           		 	},
            title: '是否有PDA',
            width: 120,
            align: 'center',
            formatter: function (data, row, index) {
                if (data == "1") {
                    return "有";
                } else {
                    return "无";
                }
            }
        }, {
            field: 'deltag',
            editor: {type: 'checkbox', options: {on: '0', off: '1'}},
            title: '是否作废',
            width: 120,
            align: 'center',
            formatter: function (data, row, index) {
                if (data == "0") {
                    return "已作废";
                } else {
                    return "正常使用"
                }
            }
        }, {
            field: 'standard',
            editor:{
                type:'text',//文本类型
                options: {
                    required: true //是必填项
                }},
            title: '取派标准',
            width: 120,
            align: 'center'
        }, {
            field: 'station',
            editor: {
                type:'text',//文本类型
                options: {
                    required: true //是必填项
                }},
            title: '所谓单位',
            width: 200,
            align: 'center'
        }]];

四、toolbar设置

var toolbar = [{
            id: 'button-view',
            text: '查询',
            iconCls: 'icon-search',
            handler: doView
        }, {
            id: 'button-add',
            text: '增加',
            iconCls: 'icon-add',
            handler: doAdd
        }, {
            id: 'button-delete',
            text: '作废',
            iconCls: 'icon-cancel',
            handler: doDelete
        }, {
            id: 'button-save',
            text: '还原',
            iconCls: 'icon-save',
            handler: doRestore
        },{
            id: 'button-edit',
            text: '保存',
            disabled:true,//行编辑控制按钮默认失效
            iconCls: 'icon-save',
            handler: saverow
        },{
            id: 'button-clear',
            text: '返回',
            disabled:true,//行编辑控制按钮默认失效
            iconCls: 'icon-back',
            handler: cancelrow
        }];

五、行编辑js实现

//================================  1  =================================
var editIndex = undefined;//全局的行编辑索引(文档中copy)
//编辑索引的记录方法(文档中copy)
 function endEditing() {
        if (editIndex == undefined) {
            return true
        }
        if ($('#grid').datagrid('validateRow', editIndex)) {
            var ed = $('#grid').datagrid('getEditor', {index: editIndex, field: 'productid'});
            var productname = $(ed.target).combobox('getText');
            $('#grid').datagrid('getRows')[editIndex]['productname'] = productname;
            $('#grid').datagrid('endEdit', editIndex);
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }
 //================================  2  =================================
		//双击开启行编辑(文档中copy)(会触发onBeforeEdit事件)
    function doDblClickRow(index) {

        if (editIndex != index) {
            if (endEditing()) {
                $('#grid').datagrid('selectRow', index)
                    .datagrid('beginEdit', index);
                editIndex = index;
            } else {
                $('#grid').datagrid('selectRow', editIndex);
            }
        }
    }
 //================================  3  =================================
    //行编辑保存按钮的功能实现
     function saverow(){
     //验证行编辑是否通过
        var flag = $("#grid").datagrid("validateRow",editIndex);
        if(!flag){
            $.messager.alert("错误操作","无法通过验证的修改！请重新输入或返回","error");
            return;
        }
        //结束行编辑(会触发onAfterEdit事件)
        $('#grid').datagrid('endEdit', editIndex);
        editIndex = undefined;
    }
    function cancelrow(){
    	//返回行编辑(会触发onCancelEdit事件)
        $('#grid').datagrid('cancelEdit', editIndex);
        editIndex = undefined;
    }
 //================================  4  =================================
  //onBeforeEdit事件对应函数(双击行开始行编辑触发)
  function doBeginEdit() {
  		//行编辑按钮生效
        $("#button-edit").linkbutton("enable");
        $("#button-clear").linkbutton("enable");
    }
    //onCancelEdit事件对应函数(返回按钮结束行编辑触发)
    function doCanceEdit(index,row) {
    	//行编辑按钮失效
        $("#button-edit").linkbutton("disable");
        $("#button-clear").linkbutton("disable");
    }
    //onAfterEdit事件对应函数(保存按钮结束行编辑并且验证通过触发)
    function doAfterEdit(index,row){//row为编辑之后保存的行数据
    //行编辑按钮失效
        $("#button-edit").linkbutton("disable");
        $("#button-clear").linkbutton("disable");
        //发送ajax请求完成后台处理
        $.ajax({
            url: "${pageContext.request.contextPath}/staff/edit.action",
            type: "post",
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify(row)
        });
    }