easyui datagrid 定义操作列

  <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="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 () {
   $("#table_Data").datagrid({
           toolbar: '#myToolbar',
           url: urlAshx,
           queryParams: { "action": "carlist" },
           method: 'post',
           width: 'auto', 10
           singleSelect: true,
           fitColumns: false,
           pagination: true,
           rownumbers: true,
             loadMsg: "正在加载数据...",
             columns: [[
                { filed: 'ID', title: '编号', width: 120, hidden: true },
                { filed: 'Name', title: '车辆名称', width: 120, align: 'center' },
                { filed: 'Type', title: '型号', width: 120, align: 'center' },
                { filed: 'LicenseTag', title: '牌号', width: 120, align: 'center' },
                { filed: 'Color', title: '座位数', width: 120, align: 'center' },
                { filed: 'Seats', title: '颜色', width: 120, align: 'center' },
                { filed: 'Remarks', title: '备注', width: 920, align: 'center' },
                {
                   filed: 'Action', title: '操作', width: 550, align: 'center', formatter: function (value, row, index) {
                        alert(row.Name);
                        var Action = "<a href='javascript:void(0);' onclick='Edit(" + row.ID + ")'>修改</a>\
                                       | <a href='javascript:void(0);' onclick='Delete(" + row.ID + ")'>删除</a>";
                         return Action;
                   }
                }
             ]]
      });
  });

 绑定数据后即可

猜你喜欢

转载自blog.csdn.net/qq_34579060/article/details/81085172