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

￡神魔★判官ぃ 2022-06-07 04:38 179阅读 0赞

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

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

JS通过AJAX向后台得到JSON数据，通过$('\#userName').combobox('loadData', optionstring)绑定，所有代码easyui教程里都有

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

function editDelete(val, row, index) { return '<a href="#" οnclick="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);' οnclick='Edit(" + row.ID + ")'>修改</a>\ 32 | <a href='javascript:void(0);' οnclick='Delete(" + row.ID + ")'>删除</a>"; 33 return Action; 34 } 35 } 36 ]] 42 }); 43 });

绑定数据后即可