关闭

easyui datagrid自定义按钮列,最后操作列

标签: jqueryjavascriptasp.neteasyuidatagrid
560人阅读 评论(20) 收藏 举报
分类:

目前小菜总结了两种方法:

一、datagrid绑定数据列是通过HTML设置好的

                <table id="dg" title="用户管理" style="width: 700px;table-layout:fixed; height: 300px" data-options="
				rownumbers:true,
				singleSelect:true,
				autoRowHeight:false,
				pagination:true,
				pageSize:10">
                    <thead>
                        <tr>
                            <th field="no" width="80">用户账号</th>
                            <th field="level" width="100">级别</th>
                            <th field="userName" width="80">姓名</th>
                            <th field="phone" width="80" align="right">电话</th>
                            <th field="Email" width="80" align="right">邮箱</th>
                            <th field="explain" width="100" align="right">备注</th>
                            <th field="opera" width="110" data-options="formatter:editDelete">操作列</th>
                        </tr>
                    </thead>
                </table>
JS通过AJAX向后台得到JSON数据,通过$('#userName').combobox('loadData', optionstring)绑定,所有代码easyui教程里都有

添加按钮“操作列”多了一个(data-options="formatter:editDelete")属性,在JS需要添加一个方法即可

function editDelete(val, row, index) {
    return '<a href="#" onclick="a()">编辑</a>';
}

val:是当前单元格内容

row:是当前行对象(所有内容)

index:是当前行索引下标值


二、datagrid绑定数据列是通过JS设置好的
$(document).ready(function () {
  4                $("#table_Data").datagrid({
  5                    toolbar: '#myToolbar',
  6                    url: urlAshx,
  7                    queryParams: { "action": "carlist" },
  8                    method: 'post',
  9                    width: 'auto', 10                    
 12                    singleSelect: true,
 13                    fitColumns: false,
 14                    pagination: true,                  
 18                    rownumbers: true,
 19                    loadMsg: "正在加载数据...",
 20                    columns: [[
 21                        { filed: 'ID', title: '编号', width: 120, hidden: true },
 22                        { filed: 'Name', title: '车辆名称', width: 120, align: 'center' },
 23                        { filed: 'Type', title: '型号', width: 120, align: 'center' },
 24                        { filed: 'LicenseTag', title: '牌号', width: 120, align: 'center' },
 25                        { filed: 'Color', title: '座位数', width: 120, align: 'center' },
 26                        { filed: 'Seats', title: '颜色', width: 120, align: 'center' },
 27                        { filed: 'Remarks', title: '备注', width: 920, align: 'center' },
 28                        {
 29                            filed: 'Action', title: '操作', width: 550, align: 'center', formatter: function (value, row, index) {
 30                                alert(row.Name);
 31                                var Action = "<a href='javascript:void(0);' onclick='Edit(" + row.ID + ")'>修改</a>\
 32                                              | <a href='javascript:void(0);' onclick='Delete(" + row.ID + ")'>删除</a>";
 33                                return Action;
 34                            }
 35                        }
 36                    ]]
 42                });
 43 });
绑定数据后即可

0
0
查看评论
发表评论
* 以上用户言论只代表其个人钱柜娱乐开户,不代表CSDN网站的钱柜娱乐开户或立场

easyui datagrid自定义按钮列,即最后面的操作列

在很多时候我们要在表格的最后添加一列操作列,easyUI貌似没有提供种功能,不过没关系,我们可以自定义来实现 首先是HTML部分 <table id="tt" class="easyui-da...
  • qq_33939283
  • qq_33939283
  • 2017-04-02 17:01
  • 4710

easyui datagrid自定义按钮列,即最后面的操作列

做项目的时候因为需求,要在表格的最后添加一列操作列,easyUI貌似没有提供这种功能,不过没关系,我们可以自定义来实现 版本:jquery easyUI 1.3.2 这里我的实现方式是采用HTML形式...
  • thc1987
  • thc1987
  • 2013-12-13 17:43
  • 85338

easyUI——DataGrid自定义操作列

项目中遇到一个问题:在easyUI的datagrid中增加一列为操作列。官网的demo中没有给出具体的解决问题的方法。解决的思路就是利用单元格的属性formatter中添加内容。
  • suneqing
  • suneqing
  • 2015-01-31 15:54
  • 5007

JQuery easyUi datagrid 中 自定义editor作为列表操作按钮列

前言 JQuery easyUi datagrid 中 使用datagrid生成数据列表后,需要在每一行加入一个操作按钮列,按钮在默认非编辑状态下是不显示的,需要激活行编辑状态下才显示,故不能再fo...
  • tianlincao
  • tianlincao
  • 2012-04-24 17:10
  • 31067

JQuery easyUi datagrid 中 自定义editor作为列表操作按钮列

前言 JQuery easyUi datagrid 中 使用datagrid生成数据列表后,需要在每一行加入一个操作按钮列,按钮在默认非编辑状态下是不显示的,需要激活行编辑状态下才显示,故不能再fo...
  • yizhiduxiu11
  • yizhiduxiu11
  • 2012-09-13 11:02
  • 13110

easyui datagrid自定义按钮列,即最后面的操作列

做项目的时候因为需求,要在表格的最后添加一列操作列,easyUI貌似没有提供这种功能,不过没关系,我们可以自定义来实现 版本:jQuery easyUI 1.3.2 这里我的实现方式是采用...
  • nvxiaq
  • nvxiaq
  • 2017-07-13 10:55
  • 180

easyui datagrid自定义按钮列,即最后面的操作列

转自:/thc1987/article/details/17305491 做项目的时候因为需求,要在表格的最后添加一列操作列,easyUI貌似没有提供...
  • bsmmaoshenbo
  • bsmmaoshenbo
  • 2016-05-27 12:49
  • 554

easyui datagrid自定义按钮列,即最后面的操作列(第二种方法)

做项目的时候因为需求,要在表格的最后添加一列操作列,easyUI貌似没有提供这种功能,不过没关系,我们可以自定义来实现 版本:jquery easyUI 1.3.2
  • thc1987
  • thc1987
  • 2014-06-24 16:54
  • 1503

easyui datagrid自定义按钮列,即最后面的操作列

做项目的时候因为需求,要在表格的最后添加一列操作列,easyUI貌似没有提供这种功能,不过没关系,我们可以自定义来实现 版本:jquery easyUI 1.3.2 这里我的实现方式是采用HTML...
  • gladmustang
  • gladmustang
  • 2015-01-13 15:56
  • 407

easyui datagrid自定义按钮列,即最后面的操作列(实现方式一)

easyui datagrid自定义按钮列,即最后面的操作列
  • crl2518528
  • crl2518528
  • 2016-09-08 10:51
  • 934
    个人资料
    • 访问:281491次
    • 积分:5585
    • 等级:
    • 排名:第5476名
    • 原创:64篇
    • 转载:3篇
    • 译文:0篇
    • 评论:1677条
    文章分类
    最新评论