easyUI datagrid表格每行显示switchbutton按钮
$("#MethodList").datagrid({
pagination: true,
sortName: 'order',
sortOrder: 'asc',
pageSize: 20,
pageList: [15, 20, 50, 100, 1000],
striped: true,
iconCls: 'icon-view',
singleSelect: false,
autoRowHeight: false,
fitColumns: true,
loadMsg: '数据加载中请稍后……',
rownumbers: false,
selectOnCheck: true,
checkOnSelect: true,
height: $(window).height() - $("#toolBar").height(),
toolbar: '#toolBar',
columns: [[
{ field: 'ck', checkbox: "true", width: 300, align: 'center' },
{ field: 'ID', title: '编号', width: 60, align: 'center' },
{
field: 'IsValid', title: '状态', width: 120, align: 'center', formatter: function (value, row, index) {
if (value == '停用') {
return "<form><input id='" + row.ActionCode + "' class=\"easyui-switchbutton switchBtn\" ></form>"
} else {
return "<form><input id='" + row.ActionCode + "' checked class=\"easyui-switchbutton switchBtn\"></form>"
}
}
},
{ field: 'Memo', title: '备注', width: 100, align: 'center' },
{
field: 'edit', title: '操作', width: 50, align: 'center', formatter: function (value, row, index) {
var edit = '<span class="icon-edit" title="编辑" style="display:inline-block;width:20px;cursor:pointer;" onclick="Edit(\'' + index + '\')"> </span> ';
return edit;
}
}
]],
onLoadSuccess: function () {
$(".switchBtn").switchbutton({
height: 18,
onText: "启用",
offText: "停用",
})
}
});
表格没行都要显示按钮不能使用id加载,当使用easyui-switchbutton类进行加载时,列表样式会显示不出来,需要重新给元素定义一个class:switchBtn
若不需要在js中加载,直接在页面写以下代码即可
<form><input id='" + row.ActionCode + "' checked class=\"easyui-switchbutton switchBtn\" data-options="onText:'启用',offText:'停用'"></form>

浙公网安备 33010602011771号