easyui-datagrid

最新推荐文章于 2020-01-09 16:26:01 发布

原创最新推荐文章于 2020-01-09 16:26:01 发布 · 192 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用EasyUI的Datagrid组件定义表格，包括设置分页、单选或多选、折叠等特性，并演示了如何通过自定义事件如加载成功或点击行来实现特定功能，例如高亮显示数据行或清空选中项。

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

定义一个表格

<table id="dgMain" class="easyui-datagrid" data-options="
               fit:true,
               rownumbers:true,
               singleSelect:false,
               collapsible:true,
               pagination:true,
               pageSize:5,//分页属性初始化页面大小
               pageList:[5, 10, 15, 20],

onLoadSuccess: function (data) { //加载表格数据时触发的事件
drawNullData();
}

onClickRow:function(){ //选中表格中的某一行触发的事件
loadDgSecond();
}

               ">
           <thead>
           <tr>
           <th data-options="field:'id', width:50,hidden:true,align:'center'">id</th>
           <th data-options="field:'username',width:130,align:'center'">用户名</th>
           <th data-options="field:'userpwd',width:130,align:'center'">密码</th>

           </tr>
           </thead>
           </table>

js：

//当用户名不为空，密码为空时，将数据行显示为黄色（表格加载时触发事件）

function drawNullData(){

       var arr=$('#dgMain').datagrid('getData');
       var trs = document.getElementsByTagName("tr");

       for(var i=0;i<arr.rows.length;i++)
       {
           if(arr.rows[i].username!=""&&arr.rows[i].userpwd="")
           {
       trs[i+arr.rows.length+2].style.backgroundColor = "#ffdf25";
           }
       }
   }

//点击表格中的某行数据触发事件

function loadDgSecond(){
       var row = $('#dgMain').datagrid('getSelected');
       if(!row){
           return;
       }

var username1 = row.username; //得到的username1为选中行的用户名

//接下来进行你想要进行的操作

}

//清空easyui-datagrid所有选中项

$("#dgMain").datagrid('clearSelections');

//获取选中行数据

var row=$('#dgMain').datagrid('getSelected');

var id = row.id;

//获取选中行行号

var rowIndex=$('#dgMain').datagrid('getRowIndex',row);