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

页面中的代码(自己引入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

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

java表格怎么添加按钮_1.6.2 在表格中添加按钮
1.6.2 在表格中添加按钮表格用于显示复合数据,其中可以指定表格的表头和表文.默认的表格控件完全是以文本方式显示目标数据,要实现在表格中添加按钮或其他组件就要通过设置自定义的渲染器来实现 ...
wps excel查找不定位_【WPS神技能】如何在WPSExcel表格中批量查找两列数据的不同？...
当我们需要在Excel表格中快速查找两列数据的不同时,如下图所示:如何快速找出"一月业绩"和"二月业绩"的不同. 在office-Excel表格中,我们可以通过 ...
python利用表格中的某一个列_python取excel表格第一列数据?python操作excel，使用xlrd模块，获取某一列数据的语句为...
用Python修改excel中一列数据可以使用pandas库,先读取excel文件,然后使用pandas库来修改一列,然后写入文件即可. 怎样用python,读取excel中的一列数据 sheet. ...
Java向word表格中添加新行并赋值
前言: 相信大家都有过操作word文档表格的经历,对于每行数据的记录与操作是比较方便的.但这是不够的,对于一些OA项目,则需要在线打开word文档并通过后台的设置将数据添加到word表格中,甚至对表格 ...
html中怎么给表格增加序号,如何给word表格中添加编号
在Word中制作表格时都希望在表格的第一列增加一个序号,其作用可以标识行或统计行数.例如从1开始,一直到80.100甚至更多.那么怎么添加呢?采用手工进行编辑还是其他的?手工编辑显然是一件不可能的事, ...
如何在html表格中添加超链接,excel表格添加网页链接(网页链接execl 制作列表)...
如何在一个excel表中做数据链接在一个相对比较大表里点击一个数据的时候选择你所说的那个数据--右键--超链接--在左侧选择第2项--然后选择表格名称--上面指定单元格--确定怎么样把网页中的表 ...
html表格中添加修改和删除链接,jQuery实现为table表格动态添加或删除tr功能示例...
本文实例讲述了jQuery实现为table表格动态添加或删除tr功能.分享给大家供大家参考,具体如下: HTML页面元素如下: 订单合同号捆包号品名规格材质重量业务需求是,从后台获取到订单 ...
python dataframe 列_python pandas库中DataFrame对行和列的操作实例讲解
用pandas中的DataFrame时选取行或列: import numpy as np import pandas as pd from pandas import Sereis, DataFram ...
ag-grid 表格中添加图片
ag-grid是一种非常好用的表格,网上搜索会有各种各样的基本用法,不过对于在ag-grid 表格中添加图片我没有找到方法,看了官方的文档,当然英文的自己也是靠网页翻译,最后发现有这么一个例子,我知道 ...

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

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

最新文章

热门文章