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>