@{
    string _prefix = "assignResForRole";
    var _treeId = _prefix + "Tree";
    var _gridId = _prefix + "Grid";
    var _treeDetail = _prefix + "Detail";
}
<div class="bjui-pageHeader">
    <div class="bjui-searchBar">
        <input style="display: none" id="roleId" value="@ViewBag.RoleId" />
        <div class="pull-right">
            <div class="alert alert-info search-inline">
                <i class="fa fa-info-circle"></i> 点击行为单选，点击复选框可多选统一授权
            </div>&nbsp;
            <button type="button" class="btn-green" data-num="1" data-icon="plus" onclick="assign()">
                授权选中项目
            </button>&nbsp;
        </div>
    </div>
</div>

<div class="bjui-pageContent tableContent">
    <div class="clearfix">
        <div style="float: left; width: 220px; overflow: auto;" class="table table-bordered">
            <ul id="@_treeId" class="ztree"></ul>
        </div>

        <div id="@_treeDetail" style="margin-left: 225px;">
        </div>
    </div>
</div>

<script type="text/javascript">
    var selectedId = 0;
    $(document).ready(function () {
        initZtree();
        loadDataGrid();
    });
    //加载数据到datagrid
    function loadDataGrid() {
        //b-jui的datagrid需要重新处理HTML
        $('#@_treeDetail').empty()
            .append('<table id="@_gridId" class="table table-bordered table-hover table-striped table-top"></table>');

        $('#@_gridId').datagrid({
            showToolbar: false,
            filterThead: false,
            columns: [
                  {
                      name: 'Id',
                      label: '角色ID',
                      hide: true
                  },
               {
                   name: 'Name',
                   label: '角色名称',
                   width: 100
               },
               
               {
                   name: 'IsBelongUser',
                   label: '是否已经授权',
                   type: 'select',
                   align: 'center',
                   items: [{ 'false': '未授权', 'true': '已授权' }],
                   width: 100
               }
            ],
            dataUrl: 'ResourceManager/LoadWithRoleAccess?cId=' + selectedId + '&roleId=' + $('#roleId').val(),
            fullGrid: true,
            showLinenumber: true,
            showCheckboxcol: true,
            paging: true,
            filterMult: false,
            showTfoot: true
        });
    }

    function zTreeOnClick(event, treeId, treeNode) {
        selectedId = treeNode.Id;
        loadDataGrid();
    }

    function initZtree() {
        var setting = {
            view: { selectedMulti: false },
            data: {
                key: {
                    name: 'Name',
                    title: 'Name'
                },
                simpleData: {
                    enable: true,
                    idKey: 'Id',
                    pIdKey: 'ParentId',
                    rootPId: 'null'
                }
            },
            callback: { onClick: zTreeOnClick }
        };
        $.getJSON('CategoryManager/LoadForTree', function (json) {
            var zTreeObj = $.fn.zTree.init($('#@_treeId'), setting, json);
            zTreeObj.expandAll(true);
        });
    }

    //授权选中的
    function assign() {
        var selected = getSelectedMany('#@_gridId', 2);
        if (selected == null) return;

        $.post('ResourceManager/AccessForRole', {
            roleId: $('#roleId').val(),
            ids: selected
            },
            function (json) {
             //   var rel = $.parseJSON(json);
                refreshGrid();
            });
    }

    function refreshGrid() {
        $('#@_gridId').datagrid('refresh');
        // loadDataGrid();
    }
    //@@ sourceURL=RoleLookup.js
</script>