1.html文件介绍

html文件按照左右上下的布局方式进行布局。
左侧为树状列表，
右侧为上下结构，上方为查询，下方为list显示列表
data-hasadd="<shiro:hasPermission name="platform:goodscategory:add">true</shiro:hasPermission>"权限获取，只有true和空白两种结果
html文件布局渲染完成后，加载js文件

2.js文件介绍

js文件中首先加载initComplete()方法。加载List对象。在这里使用json格式写
init: function () {
this.hyCommon = new HYCommon();
this.initModel();
this.initConfig();
this.initTree();
this.initGrid();
this.addEvent();
},

js文件中或许会用到hyCommon,所以首先引入this.hyCommon = new HYCommon();

接下来初始化Model，initModel: function () {
this.model = {
$treeDataArea: $('#treedataarea'),
$searchPanel: $('#searchpanel'),
$dataArea: $('#dataarea')
};
this.hyCommon.initGridModel();
},
将html文件中的dom节点使用jquery的格式定义在Model中。
this.hyCommon.initGridModel();初始化Grid列表用到的DOM，查询重置会在这里引入。

Model初始化完成之后，接着初始化Config。我们将本js文件中用到的常量，变量，和路径等定义在congfig中。常量名大写。

Config初始化完成后，对树Tree进行初始化。
initTree: function () {
var self = this,
_config = self.config;
self.tree = new HYTree({ //会用到HYTree类中的一些属性，所以先new一个对象
treetype: HYTree.prototype.EDITTREE,//树的类型
url: _config.URL_TREE,//树的路径
addurl: _config.URL_ADD_SKIP,//获取树的添加权限
editurl: _config.URL_EDIT_SKIP,//获取树的修改权限
hasadd: _config.HAS_ADD,//弹出添加操作页面
hasupdate: _config.HAS_UPDATE,//弹出修改操作页面
height: 280,//树的宽度和高度设置
width: 400
}).renderTree();
},

对树的数据渲染完成后，初始化grid，对列表数据进行渲染。

若字符如名称等有可能过长时，使用下面方法，对字符串超长处理进行处理
render: function (rowdata, rowindex, value, column) {
return _hyCommon.renderSlice(value);
}
rowdata，列表数据，rowindex，哪一条数据。value，哪一个值。column，该之所在位置。
var btnArr = []; //定义一个数组列表
if (_config.HAS_UPDATE) {//判断是否有修改权限
//将display和click封装成一个对象放到数组中
btnArr.push({

                            display: TipConstant.btnVal.editVal,
                            click: 'List.onEdit(\'' + rowdata.id + '\')'
                        });
                    }

//没有权限判定的直接将display和click封装成一个对象放到数组中
btnArr.push({
display: TipConstant.btnVal.viewVal,
click: 'List.onView('' + rowdata.id + '')'
});
return _hyCommon.operators(btnArr);
url: _config.URL_LIST,//数据渲染的路径
sortName: 'sequence',//数据的排序方式
sortOrder: 'asc',//数据的排序方式
rownumbers: true,//是否显示列号
height: '100%',
width: '100%',
pageSize: pagesize,//数据页面显示数据的条数
percentWidthMode: true//数据页面宽度，若无此设置，数据会撑出页面

数据渲染完成后，进行addEvent事件绑定
addEvent: function () {
var self = this,
_hyCommon = self.hyCommon;
_hyCommon.addGridEvent(self.grid);
},此处我们绑定了查询重置的事件。