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

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

一、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 });
绑定数据后即可

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/h273979586/article/details/78197841
个人分类: easyUI
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭