SOURCE

$("#table").jqGrid({
        caption: "角色信息列表",
        height: 200,
        nowrap: false,
        multiselect: false, //是否显示多选框
        singleSelect: true,
        striped: true,
        collapsible: true,
        mtype: "GET",
        rowNum: 3,
        rowList: [1, 2, 3],
        datatype: "json",
        url: "/static/data/tableData.json",
        pager: "#table-pager",
        colNames: ["", "", "角色名称", "数据范围", "角色说明", "创建时间", "创建者"],
        colModel: [
          { name: "roleId", hidden: true },
          { name: "dataScope", hidden: true },
          {
            name: "roleName",
            index: "roleName",
            sortable: false,
            width: 100,
            align: "left"
          },
          {
            name: "dataScopevalue",
            index: "dataScopevalue",
            sortable: false,
            width: 100,
            align: "left"
          },
          {
            name: "remark",
            index: "remark",
            sortable: false,
            width: 200,
            align: "left"
          },
          {
            name: "createTime",
            index: "createTime",
            sortable: false,
            width: 150,
            align: "left"
          },
          {
            name: "createUserName",
            index: "createUserName",
            sortable: false,
            width: 100,
            align: "left"
          }
        ],
        gridComplete: function() {
          //默认选中一行
          $("#table").jqGrid("clickDefaultRow");
        }
      });
var mockData = [
        {
          isModify: 0,
          organizationId: 1,
          organizationLevelid: ".1.",
          organizationName: "兴业证券股份有限公司",
          organizationType: 1,
          parentId: -1
        },
        {
          isModify: 0,
          organizationId: 2,
          organizationLevelid: ".1.2.",
          organizationName: "区域分公司及营业部",
          organizationType: 2,
          parentId: 1
        },
        {
          isModify: 0,
          organizationId: 3,
          organizationLevelid: ".1.3.",
          organizationName: "兴证国际金融集团有限公司",
          organizationType: 2,
          parentId: 1
        },
        {
          isModify: 0,
          organizationId: 4,
          organizationLevelid: ".1.4.",
          organizationName: "兴全基金管理有限公司",
          organizationType: 2,
          parentId: 3
        }
      ];
      var Orgsetting = {
        data: {
          simpleData: {
            enable: true,
            idKey: "organizationId",
            pIdKey: "parentId",
            rootPId: 0
          },
          key: {
            name: "organizationName"
          }
        },
        callback: {
          onClick: function(event, treeId, treeNode) {
            //如果是左边树，右边列表结构的
            //可以通过这个方法，点击对应节点的时候做ajax请求
            //$("#table").jqGrid("queryGrid",data,{url:"system/userManager/queryUser",page:1});
            $("#table").trigger("reloadGrid");
            
          },
          onRightClick: function(event, treeId, treeNode) {
            //右击事件
          }
        },
        edit: {
          enable: true,
          showRemoveBtn: false,
          showRenameBtn: false,
          drag: {
            isMove: false,
            prev: false,
            inner: false,
            next: false
          }
        }
      };
      $.fn.zTree.init($("#organizationTree"), Orgsetting, mockData);
      var treeObj = $.fn.zTree.getZTreeObj("organizationTree");
      treeObj.expandAll(true);

$.fn.xyzq_layout.defaults = {
        display_left: true,
        display_close: true,
        display_right: false, //是否显示右侧标题
        left_title: "左侧标题",
        right_title: "右侧标题",
        left_height: "200" //添加初始化左边高度
      };
      $("body").xyzq_layout("left-content", "right-content", 250, function(
        f,
        w
      ) {
        $("#table").jqGrid("setGridWidth",w);
        console.log("布局伸缩回调函数，f是左侧是显示隐藏，w是右侧的宽度");
      });

<div class="" style="position:relative;">
            <div id="left-content">
                <ul id="organizationTree" class="ztree"></ul>
            </div>
            <div id="right-content">
                <table id="table"></table>
                <div id="table-pager"></div>
            </div>
        </div>

.demo-container{
  min-height: 300px;
}
.ui-jqgrid-title {
  color: #fff !important;
}