Sencha Touch多选树组件
Ext.define('ux.MultipleTreeListView', {
extend : 'Ext.Container',
xtype : 'multipletreelistview',
alternateClassName : 'multipletreelistview',
config : {
isCheckTap : false,
flowId : null,
roleId : null,
store : null,
currentRecord : null,
currentIndex : null,
layout : 'fit',
items : [{
xtype : 'dataview',
styleHtmlContent : true,
margin : '0 10 0 10',
scrollable : {
direction : 'vertical',
directionLock : true
},
itemTpl : new Ext.XTemplate('<div class="{parentNode}" id="{node}">' + '<table style="width:100%;margin:0;">' + '<tr>' + '<tpl if="level > 0">' + '<td style="width:{level*18}px;"></td>' + '</tpl>' +
// + '<tpl if="!leaf">'//如果是boolean类型，在data[]里面可以不用指定他的类型为boolean，
//如果是store则必须在type里面指定类型为boolean，否则不能识别为boolean类型
'<tpl if="iconCls != \'user\'">' + '<tpl if="isOpen">' + '<td style="width:18px;padding:0"><image src="resources/images/nolines_minus.gif"></image></td>' + '<tpl if="iconCls == \'subrole\'">' + '<td style="width:18px;padding:0"><image style="width:18px;" src="resources/images/sl.png"></image></td>' + '<tpl else>' + '<td style="width:18px;padding:0"><image src="resources/images/folderopen.gif"></image></td>' + '</tpl>' + '<tpl else>' + '<td style="width:18px;padding:0"><image src="resources/images/nolines_plus.gif"></image></td>' + '<tpl if="iconCls == \'subrole\'">' + '<td style="width:18px;padding:0"><image style="width:18px;" src="resources/images/sl.png"></image></td>' + '<tpl else>' + '<td style="width:18px;padding:0"><image src="resources/images/folder.gif"></image></td>' + '</tpl>' + '</tpl>' + '<tpl else>' + '<td style="width:18px;padding:0"></td>' + '<td style="width:18px;padding:0"><image style="width:18px;" src="resources/images/pp.png"></image></td>' + '</tpl>' + '<td style="word-break:break-all;"><input type=\'checkbox\' onclick="util.clickFn(\'{nodeType}\', \'{node}\')" id = \'check_{node}\' class = "results" <tpl if="isChecked"> checked="checked" </tpl>/>{text}</td>' + '</tr>' + '</table>' + '</div>')
}, {
xtype : 'toolbar',
docked : 'top',
title : '人员选择树',
items : [{
xtype : 'button',
iconCls : 'arrow_left',
handler : function(button) {
util.backView();
}
}, {
xtype : 'button',
iconCls : 'check',
right : 0,
top : 5,
handler : function(button) {
if (window.confirm("确认选择吗？")) {
var me = button.getParent().getParent();
var classElements = document.getElementsByClassName("results");
var len = classElements.length;
var texts = '';
var nodes = '';
for (var i = 0; i < len; i++) {
if (classElements[i].checked) {
var node = classElements[i].id.substring(6);
var record = me.getRecordByNode(node);
texts += record.get('text');
texts += ",";
var node;
var nowNodes = record.get('node').split(",");
if (nowNodes.length > 1) {
node = nowNodes[nowNodes.length - 1];
} else {
node = record.get('node');
//处理根节点没逗号的问题
}
nodes += node;
nodes += ",";
}
}
texts = texts.substring(0, texts.length - 1);
nodes = nodes.substring(0, nodes.length - 1);
util.backView();
var view = Ext.Viewport.getActiveItem();
view.setCsfDisplay(texts);
view.setCsf(nodes);
}
}
}]
}]
},
/**
* 初始化方法
*/
initialize : function() {
var me = this;
me.callParent();
var store = Ext.create('FaultOrder.store.TreeStore');
store.setData([{
node : "-1",
nodeType : "root",
parentNode : "",
parentNodeType : "",
text : "可选子角色",
iconCls : "dict",
leaf : false,
//以下两个是客户端为达到树形效果增加的两个属性，不用服务器传来
level : 0,
isOpen : false,
isChecked : false
}]);
me.items.items[0].setStore(store);
me.items.items[0].on('itemsingletap', me.itemsingletapFn, me);
},
/**
* 页面加载完成
*/
show : function() {
var store = this.items.items[0].getStore();
var len = store.getCount();
for (var i = 0; i < len; i++) {
var record = store.getAt(i);
//获得节点对应的等级
var level = record.get('level');
var node = record.get('node');
var div = document.getElementById(node);
if (level == 0) {//初始化时，0级节点才显示
div.style.display = 'block';
} else {
div.style.display = 'none';
}
}
},
/**
* 单击
* @param {} list
* @param {} index
* @param {} target
* @param {} record
* @param {} e
* @param {} eOpts
*/
itemsingletapFn : function(list, index, target, record, e, eOpts) {
if (this.getIsCheckTap()) {
//解开锁并返回
this.setIsCheckTap(false);
return;
}
this.config.x = e.pageX;
this.config.y = e.pageY;
this.setCurrentIndex(index);
var me = this;
var level = record.get('level');
var isOpen = record.get('isOpen');
var leaf = record.get('leaf');
var node = record.get('node');
var nodeType = record.get('nodeType');
var parentNode = record.get('parentNode');
var display = 'none';
//获得所有class=node的块（子级节点）
var classElements = document.getElementsByClassName(node);
var len = classElements.length;
record.set('isOpen', !isOpen);
//切换打开/关闭节点
this.setCurrentRecord(record);
if (len < 1) {//没有子节点，则可能是还未向服务器请求到数据，此时向服务器发起请求
this.acquireNodeRequest(record);
} else {//执行树节点打开关闭操作
if (!isOpen) {//当前的isOpen和保存isOpen变量时是相反的
display = 'block';
} else {
display = 'none';
}
me.setDisplays(node, display);
}
},
/**
* 设置div块显示还是隐藏
* @param {} node
* @param {} display
*/
setDisplays : function(node, display) {
var me = this;
//获得所有class=node的块
var classElements = document.getElementsByClassName(node);
var len = classElements.length;
for (var i = 0; i < len; i++) {
var childId = classElements[i].id;
//必须先设置isOpen属性后设置显示或隐藏才生效
me.setOpenBynode(childId, false);
classElements[i].style.display = display;
if (display == 'none') {//只有隐藏的时候才把子节点隐藏，展开时没必要把子节点也展开
var childElements = document.getElementsByClassName(childId);
if (childElements.length > 0) {//如果该节点有子节点
me.setDisplays(childId, "none");
//当前节点的子节点全部隐藏
}
}
}
},
/**
* 通过node找到对应的record并设置起isOpen属性
* @param {} node
* @param {} isOpen
*/
setOpenBynode : function(node, isOpen) {
//list没绑定store直接绑定data的，在list渲染过程中会生成一个store绑定到list
var store = this.items.items[0].getStore();
var storeLen = store.getCount();
for (var i = 0; i < storeLen; i++) {
var record = store.getAt(i);
if (node == record.get('node')) {
record.set('isOpen', isOpen);
break;
}
}
},
acquireNodeRequest : function(record) {
var flowId = this.getFlowId();
var roleId = this.getRoleId();
var node;
var nowNodes = record.get('node').split(",");
if (nowNodes.length > 1) {
node = nowNodes[nowNodes.length - 1];
} else {
node = record.get('node');
//处理根节点没逗号的问题
}
var nodeType = record.get('nodeType');
var parentNode;
var nowParentNodes = record.get('parentNode').split(",");
if (nowParentNodes.length > 1) {
parentNode = nowParentNodes[nowParentNodes.length - 1];
} else {
parentNode = record.get('parentNode');
//处理根节点没逗号的问题
}
var parentNodeType = record.get('parentNodeType');
var xmlData = util.setParameterSoap('subRoleTree', config.WorkSheetMobile, 'roleId', roleId, 'flowId', flowId, 'node', node, 'nodeType', nodeType, 'parentNode', parentNode, 'parentNodeType', parentNodeType);
var me = this;
Ext.Ajax.request({
xmlData : xmlData,
success : me.successFnOfacquireNodeRequest,
scope : me
});
},
/**
* 节点
* @param {} result
*/
successFnOfacquireNodeRequest : function(result) {
var currentRecord = this.getCurrentRecord();
var currentIndex = this.getCurrentIndex();
var store = this.items.items[0].getStore();
var storeLen = store.getCount();
var firstDatas = store.getRange(0, currentIndex);
var secondDatas = [];
if (currentIndex < (storeLen - 1)) {//如果当前的index大于等于（等于时前面和后面都包含最后一个）时就不执行
secondDatas = store.getRange(currentIndex + 1, storeLen - 1);
}
var str = $(result.responseText).children().text();
str = util.replaceAll(str, '\"id\":null', '\"id\":\"null\"');
//处理其他：里面的id:null转换为json后为id: "null"
var requestData = [];
//将字符串转换为json对象
var strData = new Ext.data.reader.Json().getResponseData(str);
var strLen = strData.length;
for (var i = 0; i < strLen; i++) {
requestData[i] = {
text : strData[i].text,
iconCls : strData[i].iconCls,
leaf : strData[i].leaf,
nodeType : strData[i].nodeType,
node : currentRecord.get('node') + "," + strData[i].id, //因为传来的类似：传输网这些很多相同的节点（node相同）
parentNode : currentRecord.get('node'),
parentNodeType : currentRecord.get('nodeType'),
level : currentRecord.get('level') + 1,
isOpen : false,
isChecked : false
};
}
//将处理后的新数据通过拼接数组放到store里面显示
store.insert(currentIndex + 1, requestData);
var isOpen = currentRecord.get('isOpen');
var node = currentRecord.get('node');
//因为此时发生在点击后，则isOpen相当于点之前来说是相反的
if (isOpen) {
display = 'block';
} else {
display = 'none';
}
this.setDisplays(node, display);
},
/**
* 重写隐藏方法，摧毁掉弹出框
*/
hide : function() {
this.destroy();
},
/**
* 通过node获得record
* @param {} node
* @return {}
*/
getRecordByNode : function(node) {
var store = this.items.items[0].getStore();
var storeLen = store.getCount();
for (var i = 0; i < storeLen; i++) {
var record = store.getAt(i);
if (node == record.get('node')) {
return record;
break;
}
}
return null;
}
});
运行效果