EasyUi DataGrid、TreeGrid单元格点击事件

最新推荐文章于 2025-06-16 10:06:53 发布

蔚蓝色天空sky

最新推荐文章于 2025-06-16 10:06:53 发布

阅读量6.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Easyui 文章标签： easyui datagrid treegrid 单元格点击事件

本文链接：https://blog.youkuaiyun.com/ytangdigl/article/details/75668464

Easyui 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何处理EasyUi的DataGrid和TreeGrid的单元格点击事件，通过showDevSupplierInfo和showDevTypeInfo函数展示了具体的实现方法。

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

1、EasyUi DataGrid单元格点击事件

//设备供应商列表
var devSupplierInfoDataGrid = $('#devSupplierInfoDataGrid').datagrid({
    url : "/dev/supplier/supplier/queryList.do",
    fit : true,
    fitColumns : false,
    border : false,
    pagination : true,
    idField : 'id',
    /* textField : 'name', */
    /* sortName : 'date',
    sortOrder : 'asc', */
    rownumbers: true, 
    remoteSort: false,
    pageSize : 20,
    pageList : [ 20, 30, 50, 100 ],
    singleSelect : true,
    checkOnSelect : true,
    selectOnCheck : true,
    nowrap : false,
    showPageList:false,
    frozenColumns : [ [ {
        field : 'id',
        title : 'id',
        hidden : true
    }, {
        field : 'name',
        title : '名称',
        align:'center',
        width : 180,
        formatter:function(value,row,index){
             if(row == null){
                 return "";
             }
             value = row.name;
             return linkValueFormatter(value,row,index);
        }
    }
             ] ],
    toolbar : '#devSupplierInfoDataGridToolbar',
    onLoadSuccess : function() {
        $(this).datagrid('clearChecked');
        $(this).datagrid('clearSelections');
    },
    //单元格点击事件
    onClickCell:function(rowIndex, field, value){
        if(field == 'name'){
            var rows = $('#devSupplierInfoDataGrid').datagrid('getRows');
            //获取点击的行
            var row = rows[rowIndex];
            //查看设备供应商信息
            showDevSupplierInfo(row.id);
        }
    }
});

showDevSupplierInfo函数：

//查看设备供应商信息
function showDevSupplierInfo(id) {
    var url = "/dev/supplier/supplier/toEditJsp.do?id=" + id;
    var obj = {
        area: ['100%', '100%'],
        url : url,
        title : '查看设备供应商信息',
        width : '770px',
        height : '548px',
        id : 'supplierView'
    };
    window.XZhi.getDialogPage(2, obj);
}

2、EasyUi TreeGrid单元格点击事件

//设备类型TreeGrid
var devTypeTreeGrid = $('#devTypeTreeGrid').treegrid({
    url : "/dev/base/type/queryList.do",
    fit : true,
    fitColumns : false,
    border : false,
    idField : 'id',
    treeField : 'name',
    parentField : 'pid',
    remoteSort: false,
    rownumbers:true,
    singleSelect:true,
    checkOnSelect : true,
    selectOnCheck : true,
    nowrap : true,
    showPageList:false,
    columns : [ [ {
        field : 'name',
        title : '类型名称',
        width : 260,
        align:'left',
        sortable: true,
        formatter:function(value,row,index){
            if(row == null){
                return "";
            }
            value = row.code;
            return linkValueFormatter(value,row,index);
        }
    },{
        field : 'code',
        title : '编号',
        width : 100,
        align:'center',
        sortable: true
    },{
        field : 'order',
        title : '排序',
        width : 100,
        align:'center',
        sortable: true
    },{
        field : 'createName',
        title : '创建人',
        align:'center',
        width : 100,
        sortable: true,
        formatter:function(value,row,index){
            if(row.createUser == null){
               return "";
            }
            return row.createUser.name;
        }
    },{
        field : 'createDate',
        title : '创建日期',
        align:'center',
            width : 100,
            sortable: true,
            formatter: function (value, row, index) {
                   return getDate(value);
               }
        }
        ]],
        toolbar : '#devTypeTreeGridToolbar',
        onLoadSuccess : function(row,data) {                                
            $(this).treegrid('clearChecked');
            $(this).treegrid('clearSelections'); 

        },
        onSelect : function(rowIndex, rowData){

        }
        ,
        loadFilter: function (data, parent) {
            var opt = $(this).data().treegrid.options;
            return treeFilter(data, opt);
        },
        //单元格点击事件
        onClickCell:function(field, row){
            if(field == 'name'){
                //查看设备类型信息
                showDevTypeInfo(row.id);
            }
        } 
});

showDevTypeInfo函数：

//查看设备类型信息
function showDevTypeInfo(id){
    var url = "/dev/base/type/toEditJsp.do?id="+id+"&editType=0";
    var obj = {
            area: ['100%', '100%'],
            url: url, 
            title: '查看设备类型',
            width : '770px',
            height : '280px',
            id : 'devTypeVie'
    };
    window.XZhi.getDialogPage(2, obj);
}