html支持js逻辑吗,js逻辑

1.html文件介绍

html文件按照左右上下的布局方式进行布局。

左侧为树状列表，

右侧为上下结构，上方为查询，下方为list显示列表

data-hasadd="true"权限获取，只有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);

},此处我们绑定了查询重置的事件。