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節(jié)點使用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();
},
對樹的數(shù)據(jù)渲染完成后馋缅,初始化grid,對列表數(shù)據(jù)進行渲染绢淀。
若字符如名稱等有可能過長時萤悴,使用下面方法,對字符串超長處理進行處理
render: function (rowdata, rowindex, value, column) {
return _hyCommon.renderSlice(value);
}
rowdata皆的,列表數(shù)據(jù)覆履,rowindex,哪一條數(shù)據(jù)费薄。value硝全,哪一個值。column楞抡,該之所在位置伟众。
var btnArr = []; //定義一個數(shù)組列表
if (_config.HAS_UPDATE) {//判斷是否有修改權限
//將display和click封裝成一個對象放到數(shù)組中
btnArr.push({
display: TipConstant.btnVal.editVal,
click: 'List.onEdit(\'' + rowdata.id + '\')'
});
}
//沒有權限判定的直接將display和click封裝成一個對象放到數(shù)組中
btnArr.push({
display: TipConstant.btnVal.viewVal,
click: 'List.onView('' + rowdata.id + '')'
});
return _hyCommon.operators(btnArr);
url: _config.URL_LIST,//數(shù)據(jù)渲染的路徑
sortName: 'sequence',//數(shù)據(jù)的排序方式
sortOrder: 'asc',//數(shù)據(jù)的排序方式
rownumbers: true,//是否顯示列號
height: '100%',
width: '100%',
pageSize: pagesize,//數(shù)據(jù)頁面顯示數(shù)據(jù)的條數(shù)
percentWidthMode: true//數(shù)據(jù)頁面寬度,若無此設置召廷,數(shù)據(jù)會撐出頁面
數(shù)據(jù)渲染完成后凳厢,進行addEvent事件綁定
addEvent: function () {
var self = this,
_hyCommon = self.hyCommon;
_hyCommon.addGridEvent(self.grid);
},此處我們綁定了查詢重置的事件账胧。