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 + '\')">&nbsp;</span>&nbsp;';
                        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>

 

posted @ 2021-09-02 15:37  敲键盘的喵~  阅读(579)  评论(0编辑  收藏  举报