easyui、表格中添加操作一列，将操作下设置为修改，点击修改弹出该行对象的编号。

最新推荐文章于 2022-05-11 23:21:07 发布

思远：

最新推荐文章于 2022-05-11 23:21:07 发布

阅读量1.3k

点赞数

分类专栏： Easyui 文章标签： easyui datagrid表格单击表格操作

本文链接：https://blog.csdn.net/qq_38080370/article/details/80873563

版权

Easyui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

页面中的代码(自己引入easy插件)：

<body>

   <div id="table"></div>
</body>
<script type="text/javascript">
$(function(){
   $('#table').datagrid({
        url:'tt.json',                //显示的数据
        striped:true,           //设置斑马纹效果
        fitColumns:true,       //适应父容器
        pagination:true,       //设置显示分页
        rownumbers:true,       //显示行号
        pageSize:5,               //页面大小
        pageList:[5,10,20],       //页面大小集合
        columns:[[
            {field:'id',title:'学生ID',width:100,align:'center'},
            {field:'name',title:'学生姓名',width:100,align:'center'},
            {field:'age',title:'学生年龄',width:100,align:'center'},
            {field:'sex',title:'学生性别',width:100,align:'center'},
            {field:'handle',title:'操作',width:100,align:'center',
               formatter: function(value,row,index){
                   return '<a href="javascript:void(0)" οnclick="updateFun('+index+')" > 修改 </a>';
               }
            }
        ]],
   });

});

重点：

formatter: function(value,row,index){}详解请自行查找easyui官方文档。

return '<a href="javascript:void(0)" οnclick="updateFun('+index+')" > 修改 </a>';将操作这一列都设置为‘修改’，并取消a链接效果，以及添加一个事件，将当前行号传入。

tt.json：表格中显示的数据

{
   "rows":
   [
       {"id":"u001","name":"Tom1","age":"18","sex":"男"},
       {"id":"u002","name":"Tom1","age":"18","sex":"男"},
       {"id":"u003","name":"Tom1","age":"18","sex":"男"},
       {"id":"u004","name":"Tom1","age":"18","sex":"男"},
       {"id":"u005","name":"Tom1","age":"18","sex":"男"}
   ]

}

显示效果

上面修改给了一个单击事件，并传了行索引。

编写单击事件函数：

function updateFun(index){
   $("#table").datagrid("selectRow",index);                    //根据行索引选中它
   var obj=$("#table").datagrid("getSelected");            //获取选中行，返回一个对象
   alert(obj.id);                                                                //弹出行上id

}

整体效果展示：

总结：

1、使用formatter: function(value,row,index){ return '修改' } 将操作列改为修改(取消链接，添加单击事件并将行索引传入)。

2、根据行索引将其设置为选中状态

3、获取选中行，返回当前行对象

4、通过对象获取id

思远：

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
easyui、表格中添加操作一列，将操作下设置为修改，点击修改弹出该行对象的编号。

页面中的代码(自己引入easy插件)：&lt;body&gt; &lt;div id="table"&gt;&lt;/div&gt;&lt;/body&gt;&lt;script type="text/javascript"&gt;$(function(){ $('#table').datagrid({ url:'tt.json',
复制链接

扫一扫

专栏目录