bootstraptable前端设置树形菜单复选框勾选状态

<body class="skin-blue sidebar-mini" style="background: none">
<section class="content" id="app">
    <div class="row">
        <div class="col-xs-12">
            <table id="menus">
            </table>
        </div>
    </div>
</section>
<script type="text/javascript">
    var $table = $('#menus');
    var rid = getRequestParam("id");
    //初始化表格
    $(function () {
        $table.bootstrapTable({
            idField: 'id',
            dataType: 'json',
            url: baseUrl + '/menu/menusWithSelected/' + rid,
            columns: [
                {
                    field: 'check', checkbox: true, formatter: function (value, row) {
                        if (row["selected"] == 1) {
                            return {checked: true};
                        } else {
                            return {checked: false};
                        }
                    }
                },
                {field: 'name', title: '菜单',formatter: function (value, row) {
                        return "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class='" + row.icon + "'></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + value;
                    }},
                {field: 'premission', title: '权限标识'}
            ],


            //在哪一列展开树形
            treeShowField: 'name',
            //指定父id列
            parentIdField: 'pid',

            onResetView: function (data) {
                //console.log('load');
                $table.treegrid({
                    initialState: 'collapsed',// 所有节点都折叠
                    initialState: 'expanded',// 所有节点都展开，默认展开
                    treeColumn: 1,
                    expanderExpandedClass: 'glyphicon glyphicon-minus',  //图标样式
                    expanderCollapsedClass: 'glyphicon glyphicon-plus',
                    onChange: function () {
                        $table.bootstrapTable('resetWidth');
                    }
                });

                //只展开树形的第一级节点
               // $table.treegrid('getRootNodes').treegrid('expand');

            },
            onCheck: function (row,el) {
                var datas = $table.bootstrapTable('getData');

                $(el).attr("checked", "checked");

                // 勾选子类
                selectChilds(datas, row, "id", "pid", true);
                // 勾选父类
                selectParentChecked(datas, row, "id", "pid",true);
                // 刷新数据
                //$table.bootstrapTable('load', datas);
            },
            onUncheck: function (row,el) {
                var datas = $table.bootstrapTable('getData');
                // 勾选子类
                selectChilds(datas, row, "id", "pid", false);

                $(el).removeAttr("checked");
                // 勾选父类
                //selectParentChecked(datas, row, "id", "pid",false);
            }
            // bootstrap-table-treetreegrid.js 插件配置 -- end
        });
    });

    /**
     * 选中父项时，同时选中子项
     * @param datas 所有的数据
     * @param row 当前数据
     * @param id id 字段名
     * @param pid 父id字段名
     */
    function selectChilds(datas, row, id,pid, checked) {
        for(var i in datas){
            if(row[id] == datas[i][pid]){
                $("input[name='btSelectItem']").each(function (el) {
                    if($(this).val() == datas[i][id]){
                        $(this).attr("checked",checked);
                        $(this).prop("checked",checked);
                        selectChilds(datas, datas[i], id,pid, checked);
                    }
                });
            }
        }
    }
    function selectParentChecked(datas, row, id,pid, checked) {
        for(var i in datas){
            if(row[pid] == datas[i][id]){
                $("input[name='btSelectItem']").each(function (el) {
                    if($(this).val() == datas[i][id]){
                        $(this).attr("checked",checked);
                        $(this).prop("checked",checked);
                        selectParentChecked(datas, datas[i], id,pid, checked);
                    }
                });
            }
        }
    }



    //角色授权
    function save() {
        var menuArray = new Array();
        $("input[name='btSelectItem']").each(function (d) {
            if($(this).attr("checked")){
                console.log($(this).attr("checked"));
                menuArray.push($(this).val());
            }
        });
        $.ajax({
            type: 'POST',
            data: {menus: menuArray, rid: rid},
            async: false,
            url: baseUrl + "/role/prem",
            success: function (r) {
                if (r.success) {
                    parent.layer.msg("角色授权成功", {
                        time: 1000
                    });
                    parent.vm.refresh();
                    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                    parent.layer.close(index); // 关闭layer
                    return true;
                }
            },error:function (r) {
                alert("授权失败，请至少选择一条数据");
            }
        });
        return false;
    }

    function submit() {
        return save();

    }
</script>
</body>
由于勾选子类和勾选父类的时候无法将当前对象勾选上，所以手动勾选，在整个过程中并没有刷新数据，所以获取的时候不能使用bootstrapTable方法直接获取数据，否则无法获取到状态改变的数据。
bootstraptable前端设置树形菜单复选框勾选状态

猜你喜欢
