easyui datagrid 行数据处理

最新推荐文章于 2025-02-09 19:21:27 发布

原创最新推荐文章于 2025-02-09 19:21:27 发布 · 858 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#easyui datagrid 行数据

Jquery 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用 EasyUI 的 datagrid 组件进行自定义操作，包括获取表格字段、行数据，修改行背景颜色，绑定双击事件及调整标题头与数据的对齐方式等。

var opts = $('#dg1').datagrid('getColumnFields'); //这是获取到所有的FIELD
var rowsLength = $('#dg1').datagrid('getRows');//获取所有行

for (var m = 0; m <= rowsLength.length - 1; m++) {
        alert(rowsLength[m].ADCD);//获取所有行中某一列的数据


}

 改变行颜色rowStyler:function(rowIndex,rowData){
    var tabid=$(".easyui-datagrid").attr("tabid");
    
            return 'background-color:#d9d9c2;';
}
行的双击事件
onDblClickRow: function(rowIndex,rowData){
    var temp=[];
    for(var i in rowData){
                temp.push(rowData[i]);
    }
    
}
标题头靠右，数据靠左
var fields=$("#dg1").datagrid('getColumnFields',false);
    //datagrid头部 table 的第一个tr 的td们，即columns的集合
    var panel = $("#dg1").datagrid("getPanel");
    var headerTds =panel.find(".datagrid-view2 .datagrid-header .datagrid-header-inner table tr:first-child").children();

    //重新设置列表头的对齐方式
    headerTds.each(function (i, obj) {
        var col = $("#dg1").datagrid('getColumnOption',fields[i]);
        if (!col.hidden && !col.checkbox)
        {
            var headalign=col.headalign||col.align||'left';
            $("div:first-child", obj).css("text-align", headalign);
        }
    })
}
<th data-options="field:'XXX',align:'right',headalign:'left',sortable:'true',resizable:true,
hidden:XXX">XXX</th>