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

来源：互联网发布：java web 插件式开发编辑：程序博客网时间：2024/05/16 07:33

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

一、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