ExtJs 动态无刷新Tree，并将节点信息在Control中显示
前几天看了好多童鞋们提的关于动态加载tree，并且当点击tree的节点的时候，该节点的相关信息会显示在对应的控件上，
我觉得这挺好的，正好我以前也做过一个ExtJs的无刷新版本，所以在这里给大家分享下：
首先还是跟大家简单说下思路：
1.我们需要先做个Ext的Tree，tree是通过Ext无刷新一步动态加载的
2.将tree里面的信息反映到前台的控件中
3.保证整个页面风格都是无刷新的
思路大体就是这样的，好了大家先看下效果图：
好了，下面咱们开始一步一步的完成了。
1.首先将Ext必需的组件加载到项目中（如：ext-all.js、ext-base.js、ext-all.css等）
2.新建一个a.aspx页面，如下code：
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<!-- 公共部分 -->
<script src="../Resource/Scripts/ktv.js" type="text/javascript"></script>
<link href="../Resource/Scripts/Common/Extjs/resources/css/ext-all.css" rel="Stylesheet"
type="text/css" />
<link href="../Styles/ktv.css" rel="stylesheet" type="text/css" />
<script src="../Resource/Scripts/Common/Extjs/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="../Resource/Scripts/Common/Extjs/ext-all.js" type="text/javascript"></script>
<script src="../Resource/Scripts/basa/Common/grid.js" type="text/javascript"></script>
<script src="../Resource/Scripts/ktv.js" type="text/javascript"></script>
<script src="../Resource/Scripts/Common/Jquery/jquery-1.5.2.js" type="text/javascript"></script>
<script src="../Resource/Scripts/Common/Ajax/ajax.js" type="text/javascript"></script>
<script src="../Resource/Scripts/basa/Common/MsgAlert.js" type="text/javascript"></script>
<script src="../Resource/Scripts/basa/Common/PagingMemoryProxy.js" type="text/javascript"></script>
<script src="../Resource/Scripts/basa/Common/comboBox.js" type="text/javascript"></script>
<!-- 自定义部分 -->
<script type="text/jscript" language="javascript" src="../Resource/Scripts/basa/Base/Right_tree.js"></script>
<script type="text/jscript" language="javascript" src="../Resource/Scripts/basa/Base/Right_panl.js"></script>
</head>
<body onload="SetButtonRight();">
<form id="form1" runat="server" >
<script language="javascript" type="text/javascript">
</script>
<div class="content" id="content">
<!-- 显示按钮 -->
<div style="height: 30px; width: 100%">
<div id="floatleft">
<input type="button" id="btnAdd" value="新 增" class=" Button_width RightButton" onclick="LoadCreateInfo();" />
<input type="button" id="btnEdit" value="修 改" class="Button_width RightButton" onclick="UpdateNodeInfo()" />
<input type="button" id="btnDelete" value="删 除" class="Button_width RightButton" onclick="DeleteNode()" />
</div>
</div>
<!-- 显示tree -->
<table width="100%">
<tr>
<td style="width:35%"><div id = "tree" class="divExt"></div></td>
<td valign="top" style="width:65%"><div id = "rightpanl" class="divExt"></div></td>
</tr>
</table>
</div>
</form>
</body>
</html>
后台cs就不需要写了。
3.在上面代码中，我们也看到了，在引用的js部分我们新建了2个自定义的js文件(Right_tree.js和Right_panl.js)
Right_tree.js是用来加载tree的，而Right_panl.js是用来给控件赋值的，有的童鞋该问了在a.aspx页面中并没有出现控件啊，对头，在这里我们的控件是在另外一个页面中放置的，还有大家也可能有疑问，不是说只引用ext-all.js、ext-base.js、ext-all.css这几个就可以了吗，为什么在a.aspx中引用了好多其他的呢，其实我可以跟大家说下，ext-all.js、ext-base.js、ext-all.css这几个文件时必须要引用的，剩下的除了自定义的2个文件以外出现的其他文件是我根据ext的api分离出来的，所以大家不要有什么压力。呵呵
4.好了，废话不多说了，在第3条中我们提到了控件，所以我们要新建一个b.aspx页面用来存放控件，code如下：
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<!-- 公共部分 -->
<link href="../Resource/Scripts/Common/Extjs/resources/css/ext-all.css" rel="Stylesheet"
type="text/css" />
<link href="../Styles/ktv.css" rel="stylesheet" type="text/css" />
<script src="../Resource/Scripts/Common/Extjs/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="../Resource/Scripts/Common/Extjs/ext-all.js" type="text/javascript"></script>
<script src="../Resource/Scripts/Common/Jquery/jquery-1.5.2.js" type="text/javascript"></script>
<script src="../Resource/Scripts/Common/Ajax/ajax.js" type="text/javascript"></script>
<script src="../Resource/Scripts/basa/Common/CheckCb.js" type="text/javascript"></script>
<link href="../Resource/Scripts/basa/Common/CheckCb.css" rel="Stylesheet" />
<script src="../Resource/Scripts/basa/Common/comboBox.js" type="text/javascript"></script>
<script src="../Resource/Scripts/Common/Extjs/ext-lang-zh_CN.js" type="text/javascript" charset="gb2312"></script>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript" language="javascript">
var isLoad = true;
function pageLoad() {
if (isLoad) {
//下拉列表显示
var codeList = getCodeList('NO15');
var codeValueList = [];
for (var i = 0; i < codeList.length; i++) {
var code = {};
code.code = codeList[i].EnumCode;
code.value = codeList[i].EnumName;
codeValueList.push(code);
}
var codeListpt = getCodeList('NO16');
var codeValueListpt = [];
for (var i = 0; i < codeListpt.length; i++) {
var code = {};
code.code = codeListpt[i].EnumCode;
code.value = codeListpt[i].EnumName;
codeValueListpt.push(code);
}
var codeListLeft = getCodeList('NO37');
var codeValueListleft = [];
for (var i = 0; i < codeListLeft.length; i++) {
var code = {};
code.code = codeListLeft[i].EnumCode;
code.value = codeListLeft[i].EnumName;
codeValueListleft.push(code);
}
ShowCheckComboBox('rightScope', 'Json', codeValueList, false);
ShowEasyComboBox('privilegType', 'Json', codeValueListpt, false);
ShowEasyComboBox('cmLeaf', 'Json', codeValueListleft, false);
Ext.onReady(function () {
Ext.QuickTips.init();
SetComboBoxDisabled('rightScope', true);
SetComboBoxDisabled('privilegType', true);
SetComboBoxDisabled('cmLeaf', true);
Ext.getCmp('rightScope_cb').setWidth(168);
Ext.getCmp('privilegType_cb').setWidth(168);
Ext.getCmp('cmLeaf_cb').setWidth(168);
});
isLoad = false;
}
}
function SetLoad() {
SetComboBoxDisabled('rightScope', false);
SetComboBoxDisabled('privilegType', false);
SetComboBoxDisabled('cmLeaf', false);
}
</script>
<div>
<center>
<table width="100%" class="doubletab">
<tr>
<td class="td1">父权限:</td>
<td class="td2">
<input type="text" id="parentName" class="findinput" disabled="disabled" style=" width:166px;" />
<input type="text" id="parentCode" class="findinput" style="display:none" disabled="disabled" style=" width:166px;" /></td>
</tr>
<tr>
<td class="td1">权限代码:</td>
<td class="td2"><input type="text" id="rigtCode" class="findinput" onkeyup="value=value.replace(/\s/g,'')" style=" width:166px;" /></td>
</tr>
<tr>
<td class="td1">权限名称:</td>
<td class="td2"><input type="text" id="rightName" class="findinput" onkeyup="value=value.replace(/\s/g,'')" style=" width:166px;" /></td>
</tr>
<tr>
<td class="td1">权限范围:</td>
<td class="td2"><input type="text" id="rightScope" class="selectinput" /></td>
</tr>
<tr>
<td class="td1">特权类型:</td>
<td class="td2"><input type="text" id="privilegType" class="selectinput" /></td>
</tr>
<tr>
<td class="td1">是否存在下级:</td>
<td class="td2">
<input type="text" id="cmLeaf" class="selectinput" style=" width:166px;" />
</td>
</tr>
<tr>
<td class="td1">连接页面:</td>
<td class="td2"><input type="text" id="pageUrl" class="findinput" onkeyup="value=value.replace(/\s/g,'')" style=" width:166px;" /></td>
</tr>
</table>
</center>
<input id="status" type="text" value="ins" style="display:none" />
<input id="rightId" type="text" style="display:none" />
</div>
</form>
</body>
</html>
5.在b.aspx中大家看到了 出现了一些js代码，还有几个方法没有找到，那个不用担心，因为我们马上就可以看到了呵呵，
下面我们介绍下Right_tree.js这个文件，这个文件时用来加载tree的，前面已经提到过了，代码如下：
View Code
var tree;
//形成树与根节点
var TreeTest = function () {
var Tree = Ext.tree;
var _h = Ext.getBody().getViewSize().height - 40;
return {
init: function () {
tree = new Tree.TreePanel({
id: 'firsttree',
title: '权限管理',
animate: true,
autoScroll: true,
rootVisible: true,
containerScroll: true,
margins: 0,
//width: 500,
height: _h,
lines: true,
dropConfig: { appendOnly: true }
});
var root = new Tree.AsyncTreeNode({
text: '查看权限列表',
draggable: false,
id: 'root',
storestatus: 1,
loader: new Ext.tree.TreeLoader({
dataUrl: '../AjaxTransferPage/Base/Rights.ashx'
})
});
tree.setRootNode(root);
tree.render('tree');
root.on('expand', gettree);
// root.on('click', nodeclick);
}
};
} ();
//异步加载树
function gettree(node) {
if (node.childNodes.length > 0) {
if (node.childNodes[0].text != 'loading') {
return;
}
}
var curNodeId = '';
if (node.id == 'root')
{
curNodeId = '';
}
else { //非根节点
curNodeId = node.id;
}
Fix.Ajax.url = '../AjaxTransferPage/Base/Right.ashx';
Fix.Ajax.asyn = false;
Fix.Ajax.JSON = 'type=getNextNodes&nodeId=' + curNodeId;
Fix.Ajax.success = function () {
var data = this.returnJSON.ReturnValue;
for (var i = 0; i < data.length; i++) {
var cnode = new Ext.tree.AsyncTreeNode({
id: data[i].RightId,
checked: false,
text: data[i].RightName + '-' + data[i].RigthCode,
leaf: data[i].IsLeaf == 0 ? true : false,
// url: data[i].Url,
children:
[{
text: 'loading',
iconCls: 'loading',
leaf: true
}]
});
cnode.on('expand', gettree);
if (data[i].RightId != '5785d265-dc06-444c-b468-15cda433912e' && data[i].RightId != 'aa77f4e1-3ab4-4e87-a7a9-3f0fb9428f25') {
cnode.on('click', nodeclick);
}
node.appendChild(cnode);
}
if (node.firstChild != null && node.id != 'root' && node.firstChild.text == 'loading') {
node.firstChild.remove();
}
}
Fix.Ajax.execute(); //执行
}
//清空当前节点下所有子节点
function ClearCurNextAllNode(node) {
var tNode = tree.getNodeById(node);
tNode.removeAll();
tNode.expand();
}
//点击节点 带出详细信息
function nodeclick(node) {
//点击根节点不刷新PANLE
if (node.id != 'root') {
//去数据库取到最新记录赋值 通过GUID
var obj;
Fix.Ajax.url = '../AjaxTransferPage/Base/Right.ashx'; //指定访问页面
Fix.Ajax.asyn = false; //同步AJAX提交
Fix.Ajax.JSON = 'type=getOnly&nodeId=' + node.id; //提交参数
Fix.Ajax.success = function () {
obj = this.returnJSON.ReturnValue; //回调函数
}
Fix.Ajax.execute(); //执行
//更新PANEL页面
SetPanleInfo(obj,node.parentNode.text);
}
}
//点击新增按钮 判断选中数
function LoadCreateInfo() {
var check = tree.getChecked();
if (check.length == 1) {
if (check[0].leaf) {
parent.ExtAlert('waring', '请您选择非叶子节点记录。');
return;
}
SetPanelInfoOnCreate(check[0].id, check[0].text);
} else {
parent.ExtAlert('waring', '请您选择一条记录作为新增权限的父权限。');
}
}
//点击新增按钮 判断选中数
function UpdateNodeInfo() {
var check = tree.getChecked();
if (check.length == 1) {
//修改接口
nodeclick(check[0]);
} else {
parent.ExtAlert('waring', '请您选择一条记录作为要修改的记录。');
}
}
//删除
function DeleteNode() {
var check = tree.getChecked();
if (check.length == 1) {
//if (confirm('确定删除？') == false) return;
parent.ExtAlert('question', '确定删除？', function () {
Fix.Ajax.url = '../AjaxTransferPage/Base/Right.ashx'; //指定访问页面
Fix.Ajax.asyn = false; //同步AJAX提交
Fix.Ajax.JSON = 'type=del&nodeId=' + check[0].id; //提交参数
Fix.Ajax.success = function () {
var obj = this.returnJSON; //回调函数
//Panl初始化状态
LoadPanle();
//刷新树
ClearCurNextAllNode(check[0].parentNode.id);
}
Fix.Ajax.execute(); //执行
})
} else {
parent.ExtAlert('waring', '请您选择一条记录进行删除操作。');
}
}
Ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);
Ext.onReady(function () {
setTimeout("ComResize()", 200);
});
//通过window.onresize事件来执行allComResize函数控制tab容器的大小
var oTime;
window.onresize = function () {
if (oTime) {
clearTimeout(oTime);
}
oTime = setTimeout("ComResize()", 100); //延迟100毫秒执行
}
function ComResize() {
try {
var _h = Ext.getBody().getViewSize().height - 40;
// var _w = Ext.getBody().getViewSize().width - 10;
// 获取面板
var centerpanel = Ext.getCmp('firsttree');
if (centerpanel) {
centerpanel.setHeight(_h);
// centerpanel.setWidth(_w);
}
var pRight = Ext.getCmp('pRight');
if (pRight) {
pRight.setHeight(_h);
var iframesPanle = document.getElementById('pif');
iframesPanle.style.height = _h+'px';
}
} catch (e) {
}
}
tree加载完了，现在我们就要将需要的控件也同样显示在页面上了，这就少不了我们的Right_panl.js这个文件了，代码如下：
View Code
//点击树赋值接口
function SetPanleInfo(obj, parentText) {
parentInfo = obj.ParentRigth;
//显示保存,重置按钮
Psave.show();
Preset.show();
var wiframe = window.frames['pif'];
wiframe.document.getElementById('parentCode').disabled = 'disabled';
wiframe.document.getElementById('rigtCode').disabled = '';
wiframe.document.getElementById('rightName').disabled = '';
wiframe.document.getElementById('pageUrl').disabled = '';
//通过传入对象进行赋值操作
wiframe.document.getElementById('status').value = 'upd';
wiframe.document.getElementById('rightId').value = obj.RightId;
wiframe.document.getElementById('parentCode').value = obj.ParentRigth;
wiframe.document.getElementById('parentName').value = parentText;
wiframe.document.getElementById('rigtCode').value = obj.RigthCode;
wiframe.document.getElementById('rightName').value = obj.RightName;
wiframe.document.getElementById('pageUrl').value = obj.PageUrl;
wiframe.SetLoad();
wiframe.SetComboBoxValue('rightScope', obj.RigthScope);
wiframe.SetComboBoxValue('privilegType', obj.PeiviegeType);
wiframe.SetComboBoxValue('cmLeaf', obj.IsLeaf + '');
}
//点击新增后触发
function SetPanelInfoOnCreate(parantId, parenttext) {
parentInfo = parantId
//显示保存,重置按钮
//Pputin.show();
Psave.show();
Preset.show();
var wiframe = window.frames['pif'];
wiframe.document.getElementById('parentCode').disabled = 'disabled';
wiframe.document.getElementById('rigtCode').disabled = '';
wiframe.document.getElementById('rightName').disabled = '';
wiframe.document.getElementById('cmLeaf').disabled = '';
wiframe.document.getElementById('pageUrl').disabled = '';
wiframe.document.getElementById('status').value = 'ins';
wiframe.document.getElementById('rightId').value = '';
wiframe.document.getElementById('parentCode').value = parantId;
wiframe.document.getElementById('parentName').value = parenttext;
wiframe.document.getElementById('rigtCode').value = '';
wiframe.document.getElementById('rightName').value = '';
wiframe.document.getElementById('pageUrl').value = '';
wiframe.SetLoad();
wiframe.SetComboBoxValue('rightScope', '');
wiframe.SetComboBoxValue('privilegType', '');
wiframe.SetComboBoxValue('cmLeaf', '');
}
//初始化接口 EXT PANL 渲染完毕后触发
function LoadPanle() {
//隐藏三个按钮
// Pputin.hide();
Psave.hide();
Preset.hide();
//将页面所有属性不可用
var wiframe = window.document.getElementById('pif');
wiframe.src = iframSrc;
var func;
if (wiframe.attachEvent) {
wiframe.attachEvent("onload", func = function () {
var wiframe = window.frames['pif'];
wiframe.document.getElementById('parentCode').disabled = 'disabled';
wiframe.document.getElementById('rigtCode').disabled = 'disabled';
wiframe.document.getElementById('rightName').disabled = 'disabled';
wiframe.document.getElementById('rightScope').disabled = 'disabled';
wiframe.document.getElementById('privilegType').disabled = 'disabled';
wiframe.document.getElementById('cmLeaf').disabled = 'disabled';
wiframe.document.getElementById('pageUrl').disabled = 'disabled';
wiframe.pageLoad();
wiframe.detachEvent("onload", func);
});
}
}
var iframSrc = 'RightItem.aspx';
var ifram = '<iframe id ="pif" name = "pif" allowTransparency="true" style="background:#e9f3ff;border-top-width: 0px; border-left-width: 0px;'
+ 'border-bottom-width: 0px; border-right-width: 0px;'
+ 'font:12px, Tahoma,Verdana,Arial" '
+ 'src=' + iframSrc + ' frameborder="0" width="100%" scrolling="no" height="100%"></iframe>';
////提交按钮
//var Pputin = new Ext.Button({
////anchor : '80%',
// text: '提 交',
// x: 260,
// y: 240,
// style: 'position:absolute',
// width: 80
//});
//Pputin.on('click', function () {
////提交操作
// SavePanelInfo();
////重置
// ResetPanelInfo();
//});
//保存按钮
var Psave = new Ext.Button({
//anchor : '80%',
text: '保 存',
x: 286,
y: 240,
style: 'position:absolute',
width: 80
});
Psave.on('click', function () {
//保存操作
SavePanelInfo();
if (!IsSaveTrue) return;
//保存后初始化状态
LoadPanle();
//刷新树
ClearCurNextAllNode(parentInfo);
});
//关闭按钮
var Preset = new Ext.Button({
//anchor : '80%',
text: '重 置',
x: 373,
y: 240,
style: 'position:absolute',
width: 80
});
Preset.on('click', function () {
//重置清空操作
ResetPanelInfo();
});
Ext.onReady(function () {
var p = new Ext.Panel({
title: '详细信息',
id: 'pRight',
collapsible: false,
// renderTo: 'rightpanl',
// height: 318,
shim: false,
items: [{ title: '显示详细信息',
header: false,
x: 0,
y: 0,
html: ifram,
border: false
}]
});
// p.add(Pputin);
p.add(Psave);
p.add(Preset);
p.on("afterrender", LoadPanle);
p.render('rightpanl');
});
//重置PANEL内容
function ResetPanelInfo() {
var wiframe = window.frames['pif'];
//初始化
wiframe.document.getElementById('parentCode').value = '';
wiframe.document.getElementById('rigtCode').value = '';
wiframe.document.getElementById('rightName').value = '';
wiframe.document.getElementById('pageUrl').value = '';
wiframe.SetComboBoxValue('rightScope', '');
wiframe.SetComboBoxValue('privilegType', '');
wiframe.SetComboBoxValue('cmLeaf', '');
}
var IsSaveTrue = true;
//用于记录传入操作的父节点
var parentInfo;
//保存方法
function SavePanelInfo() {
var wiframe = window.frames['pif'];
var status = wiframe.document.getElementById('status').value;
var rightId = wiframe.document.getElementById('rightId').value;
var parentCode = wiframe.document.getElementById('parentCode').value;
var rigtCode = wiframe.document.getElementById('rigtCode').value;
var rightName = wiframe.document.getElementById('rightName').value;
var pageUrl = wiframe.document.getElementById('pageUrl').value;
var rightScope = wiframe.Ext.getCmp('rightScope_cb').getValue();
if (rightScope == undefined) {
rightScope = '';
}
var privilegType = wiframe.document.getElementById('privilegType').CodeValue;
if (privilegType == undefined) {
privilegType = '';
}
var alertstr = '';
var cmLeaf = wiframe.document.getElementById('cmLeaf').CodeValue;
if (cmLeaf == undefined) {
alertstr += '是否存在下级必须选择。<br/>';
}
if (rigtCode == '') {
alertstr += '权限代码不可为空。<br/>';
}
if (rightName == '') {
alertstr += '权限名称不可为空。<br/>';
}
if (alertstr.length > 0) {
parent.ExtAlert('waring', alertstr);
//不执行保存
IsSaveTrue = false;
return;
}
var params = '&rightId=' + rightId + '&parentCode=' + parentCode + '&rigtCode=' + rigtCode
+ '&rightName=' + rightName + '&rightScope=' + rightScope
+ '&privilegType=' + privilegType + '&IsLeaf=' + cmLeaf + '&pageUrl=' + pageUrl;
var rbo;
Fix.Ajax.url = '../AjaxTransferPage/Base/Right.ashx'; //指定访问页面
Fix.Ajax.asyn = false; //同步AJAX提交
Fix.Ajax.JSON = 'type=' + status + params; //提交参数
Fix.Ajax.success = function () {
rbo = this.returnJSON; //回调函数
//异常处理
}
Fix.Ajax.execute(); //执行
if (rbo == '-1') {
//代码已存在
parent.ExtAlert('waring', '该代码已存在，请修改。');
IsSaveTrue = false;
} else {
IsSaveTrue = true;
}
}
在这个代码中我们要特别注意这么一段代码：
var iframSrc = 'RightItem.aspx';
var ifram = '<iframe id ="pif" name = "pif" allowTransparency="true" style="background:#e9f3ff;border-top-width: 0px; border-left-width: 0px;'
+ 'border-bottom-width: 0px; border-right-width: 0px;'
+ 'font:12px, Tahoma,Verdana,Arial" '
+ 'src=' + iframSrc + ' frameborder="0" width="100%" scrolling="no" height="100%"></iframe>';
这段代码是用来配置将控件存放的页面显示的，大家需要那个页面，然后就将'RightItem.aspx';替换一下就可以了。
在Right_panl.js文件中出现了一些这个这种代码：
var wiframe = window.frames['pif'];
wiframe.document.getElementById('parentCode').disabled = 'disabled';
wiframe.document.getElementById('rigtCode').disabled = '';
wiframe.document.getElementById('rightName').disabled = '';
wiframe.document.getElementById('cmLeaf').disabled = '';
wiframe.document.getElementById('pageUrl').disabled = '';
这些代码的意思就是b.aspx页面中存放的控件的Id，并且找到这些控件给它们赋值的。
同样的在这2个js文件中都有
Fix.Ajax.url = '../AjaxTransferPage/Base/Right.ashx'; //指定访问页面
Fix.Ajax.asyn = false; //同步AJAX提交
Fix.Ajax.JSON = 'type=del&nodeId=' + check[0].id; //提交参数
Fix.Ajax.success = function () {
var obj = this.returnJSON; //回调函数
//Panl初始化状态
LoadPanle();
//刷新树
ClearCurNextAllNode(check[0].parentNode.id);
}
Fix.Ajax.execute(); //执行
也就是我们需要建立相应Ajax相应页面，用来处理客户端发送的请求，然后序列化成Json返回给客户端。客户端根据返回的Json进行处理并显示到页面上。Ajax相应页面，在这里我就不详述了，O(∩_∩)O~
6.截止到现在咱们基本的功能都已经出来了，有些童鞋可能又要问了，在b.aspx页面中出现的js的方法我还没有讲呢，现在我就来说下，还记得上面第3条中我说过我从ext中分离出来一些功能，所以在b.aspx页面中出现的方法时我在comboBox.js这个里面定义的，所以...我们还是来看看这个页面的相关代码吧 呵呵
View Code
绑定ComboBox接口方法
参数：TEXEBOX控件ID（如<input type='text' id='cbName' />),代码表代码
*/
function DataBindComboBox(textId, code) {
var arr = getCodeList(code);
var codeList = arr; //数据
var clist = [];
var sObj = {};
sObj.Title = '字典代码';
sObj.DataName = 'DictCode';
sObj.IsHide = true; //是否可见
clist.push(sObj);
sObj = {};
sObj.Title = '代码';
sObj.DataName = 'EnumCode';
sObj.IsCode = true; //是否存储值
clist.push(sObj);
sObj = {};
sObj.Title = '名称';
sObj.DataName = 'EnumName';
sObj.IsName = true;
clist.push(sObj);
var showList = clist; //列
//显示
ShowComboBox(textId, showList, codeList);
}
/*
绑定ComboBox接口方法（自定义）
*/
function DataBindComboBoxDefined(textId, showList, codeList, width) {
//显示
ShowComboBox(textId, showList, codeList, width);
}
//显示高度
var MaxHeight = 250;
//显示宽度
var MaxWidth = 270;
//显示级联的下拉菜单
//getDataFunc 为获取子下拉菜单的数据回调方法，
//参数：父下拉菜单的CodeValue
//返回：绑定在子菜单的Json
function ShowUnionEasyComboBox(txtId, parentTxtId, dataType, getDataFunc, IsInput,myData) {
var parentInput = document.getElementById(parentTxtId);
if (parentInput == undefined || parentInput == '') {
parentInput = parent.document.getElementById(txtId);
}
Ext.onReady(function () {
var parentComboBox = Ext.getCmp(parentTxtId + '_cb');
if (parentComboBox == undefined || parentComboBox == '') {
parentComboBox = parent.Ext.getCmp(parentTxtId + '_cb');
}
var childComboBox = Ext.getCmp(txtId + '_cb');
if (childComboBox == undefined || childComboBox == '') {
childComboBox = parent.Ext.getCmp(txtId + '_cb');
}
//--------------------------------------------
if (myData == undefined || myData == '' || myData == [] || myData.length == 0) {
myData = undefined;
myData = [];
var obj = {};
obj.code = undefined;
obj.value = '请选择...';
myData.push(obj);
Ext.QuickTips.init();
}
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({}, [{ name: 'code', mapping: 'code' }, { name: 'value', mapping: 'value'}])
});
store.load();
if (childComboBox == undefined || childComboBox == '') {
var cb = new Ext.form.ComboBox({
id: txtId + '_cb',
editable: false,
store: store,
displayField: 'value',
valueField: 'code',
typeAhead: true,
mode: 'local',
width: 120,
maxHeight: 200,
forceSelection: true,
triggerAction: 'all',
emptyText: '请选择...',
// selectOnFocus: true,
applyTo: txtId
});
cb.on('select', function(c, r, i) {
document.getElementById(txtId).CodeValue = r.data.code;
});
document.getElementById(txtId).IsCombox = true;
}
//----------------------------------------
parentComboBox.on("select", function (c, r, i) {
parentInput = document.getElementById(parentTxtId);
if (parentInput == undefined || parentInput == '') {
parentInput = parent.document.getElementById(parentTxtId);
}
childComboBox = Ext.getCmp(txtId + '_cb');
if (childComboBox == undefined || childComboBox == '') {
childComboBox = parent.Ext.getCmp(txtId + '_cb');
}
var childInput = document.getElementById(txtId);
if (childInput == undefined || childInput == '') {
childInput = parent.document.getElementById(txtId);
}
if (parentInput.CodeValue == undefined) {
//更改子菜单的样式
childInput.style.readonly = true;
}
myData = getDataFunc(parentInput.CodeValue);
if (myData == undefined || myData == '' || myData == [] || myData.length == 0) {
myData = undefined;
myData = [];
var obj = {};
obj.code = undefined;
obj.value = '请选择...';
myData.push(obj);
}
if (childComboBox == undefined || childComboBox == '') {
var t = false;
Ext.onReady(function () {
Ext.QuickTips.init();
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({}, [{ name: 'code', mapping: 'code' }, { name: 'value', mapping: 'value'}])
});
store.load();
var cb = new Ext.form.ComboBox({
id: txtId + '_cb',
editable: t,
store: store,
displayField: 'value',
valueField: 'code',
typeAhead: true,
mode: 'local',
width: 120,
maxHeight: 200,
forceSelection: true,
triggerAction: 'all',
emptyText: '请选择...',
// selectOnFocus: true,
applyTo: txtId
});
cb.on('select', function (c, r, i) {
document.getElementById(txtId).CodeValue = r.data.code;
});
document.getElementById(txtId).IsCombox = true;
});
}
else {
childComboBox.store.proxy = new Ext.data.MemoryProxy(myData);
childComboBox.getStore().load();
childComboBox.getStore().reload();
childComboBox.reset();
childComboBox.doQuery('', true);
}
});
});
return myData;
}
//显示简单下拉列表
function ShowEasyComboBox(txtId, dataType, myData, IsInput, maxHeight) {
var t = false;
if (document.getElementById(txtId) == undefined) {
return;
}
//设置下拉列表的高度
if (maxHeight == undefined) maxHeight = 200;
Ext.onReady(function () {
Ext.QuickTips.init();
var arrData = [];
var arr = {};
arr.code = '';
arr.value = '请选择...';
// arrData.unshift(arr);
arrData.push(arr);
var aData = arrData.concat(myData);
var store = '';
if (dataType == 'ArrayList') {
store = new Ext.data.ArrayStore({
fields: ['code', 'value'],
data: aData
});
}
else if (dataType == 'Json') {
var rt = {};
rt.data = aData;
store = new Ext.data.JsonStore({
fields: ['code', 'value'],
root: 'data',
data: rt
});
}
var cb = new Ext.form.ComboBox({
id: txtId + '_cb',
editable: t,
store: store,
displayField: 'value',
valueField: 'code',
typeAhead: true,
mode: 'local',
width: 120,
maxHeight: maxHeight,
forceSelection: true,
triggerAction: 'all',
emptyText: '请选择...',
// selectOnFocus: true,
applyTo: txtId
});
cb.setValue('');
if (txtId == 'dataState')
cb.setValue('0');
cb.on('select', function (c, r, i) {
if (r.data.code != '')
document.getElementById(txtId).CodeValue = r.data.code;
else document.getElementById(txtId).CodeValue = undefined;
});
document.getElementById(txtId).IsCombox = true;
});
}
function ShowCheckComboBox(txtId, dataType, myData, IsInput) {
var t = false;
Ext.onReady(function () {
Ext.QuickTips.init();
var arrData = [];
var arr = {};
arr.code = '';
arr.value = '请选择...';
// arrData.unshift(arr);
arrData.push(arr);
var aData = arrData.concat(myData);
var store = '';
if (dataType == 'ArrayList') {
store = new Ext.data.ArrayStore({
fields: ['code', 'value'],
data: aData
});
}
else if (dataType == 'Json') {
var rt = {};
rt.data = myData;
store = new Ext.data.JsonStore({
fields: ['code', 'value'],
root: 'data',
data: rt
});
}
var cb = new Ext.ux.form.LovCombo({
id: txtId + '_cb',
store: store,
mode: 'local',
valueField: 'code',
width: 120,
displayField: 'value',
emptyText: '请选择...',
forceSelection: true,
editable: t,
typeAhead: true,
applyTo: txtId
});
document.getElementById(txtId).IsCombox = true;
});
}
//显示ComboBox
function ShowComboBox(textId, colList, myData, width) {
Ext.onReady(function () {
Ext.QuickTips.init();
if (width == undefined) {
width = MaxWidth;
}
//拼DIV ID
var divId = textId + '_grid';
//构建一个层 用于显示GRID
var tpl = '<tpl for="."><div style="height:200px"><div id="' + divId + '"></div></div></tpl>';
//下拉控件
var combo = new Ext.form.ComboBox({
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'value',
'text'
],
data: [['', '']]
}),
displayField: 'value',
editable: false,
mode: 'local',
forceSelection: false,
triggerAction: 'all',
emptyText: '请选择...',
//selectOnFocus: true,
applyTo: textId,
id: textId + '_cb',
width: 120,
listWidth: width,
maxHeight: MaxHeight,
tpl: tpl,
validateOnBlur: false,
validationEvent: false,
validationDelay: 500,
preventMark: true
});
combo.on("expand", function (c) {
try {
document.getElementById(divId).innerHTML = '';
var cc = CreateComboxGrid(cbgStore, cbgModel, width);
cc.on('rowclick', function (grid, rowIndex) {
//获取当前列数据
var data = grid.getStore().data.items[rowIndex].data;
var code = '', name = '';
for (var i = 0; i < colList.length; i++) {
if (colList[i].IsCode) {
if (code != '') {
//alert('只可以设置一列取值项(IsCode)。');
parent.ExtAlert('waring', '只可以设置一列取值项(IsCode)。');
return;
}
code = data[colList[i].DataName];
}
if (colList[i].IsName) {
if (name != '') {
//alert('只可以设置一列显示项(IsName)。');
parent.ExtAlert('waring', '只可以设置一列显示项(IsName)。');
return;
}
name = data[colList[i].DataName];
}
}
//combo.setRawValue(code);
combo.setValue(name);
var oo = document.getElementById(textId);
document.getElementById(textId).CodeValue = code;
});
document.getElementById(txtId).IsCombox = true;
cc.render(divId);
var ds = cc.getStore()
ds.load(myData);
}
catch (e) {
}
});
/* 组装COLMODEL对象变量 */
var colModelValue = SetColModelComboBox(colList);
//构建数据列变量
var fields = SetColDataComboBox(colList);
//构建显示列对象
var cbgModel = new Ext.grid.ColumnModel({
defaults: {
width: 120,
sortable: false
},
columns: colModelValue
});
var cbgStore = new Ext.data.Store({
proxy: new Ext.ux.data.PagingMemoryProxy(myData),
reader: new Ext.data.ArrayReader({}, fields)
});
//构建GRID
//var cbGrid = CreateComboxGrid(cbgStore, cbgModel);
})
}
function CreateComboxGrid(cbgStore, cbgModel, width) {
return new Ext.grid.GridPanel({
store: cbgStore,
cm: cbgModel,
width: width,
height: MaxHeight,
headerAsText: false,
stripeRows: true
});
}
//构建显示列
function SetColModelComboBox(colList) {
var arr = [];
// arr.push(new Ext.grid.RowNumberer());
for (var i = 0; i < colList.length; i++) {
var col = {};
col.header = colList[i].Title;
col.dataIndex = colList[i].DataName;
col.renderer = colList[i].DataName;
col.sortable = false;
if (colList[i].Width != undefined || colList[i].Width > 0) {
var int = parseInt(colList[i].Width)
col.width = int;
}
if (colList[i].IsHide) {//是否隐藏
col.hidden = true;
}
if (colList[i].IsCode) {//是否代码 （用于数据库存储）
col.IsPk = true;
}
if (colList[i].IsName) {//是否显示界面
col.IsName = true;
}
arr.push(col);
}
return arr;
}
//构建数据列
function SetColDataComboBox(colList) {
var fields = [];
for (var i = 0; i < colList.length; i++) {
var file = {};
file.name = colList[i].DataName;
file.mapping = colList[i].DataName;
fields.push(file);
}
return fields;
}
//停用启用该控件
function SetComboBoxDisabled(txtid, status) {
var cbId = txtid + '_cb';
Ext.getCmp(cbId).setDisabled(status);
}
//为文本框复值
function SetComboBoxValue(txtid, value) {
var cbId = txtid + '_cb';
Ext.getCmp(cbId).setValue(value);
document.getElementById(txtid).CodeValue = value;
}
function SetComboBoxUnionValue(txtId, parentValue, childValue, getDataFunc) {
var childComboBox = Ext.getCmp(txtId + '_cb');
if (childComboBox == undefined || childComboBox == '') {
childComboBox = parent.Ext.getCmp(txtId + '_cb');
}
var myData = getDataFunc(parentValue);
if (childComboBox != undefined && childComboBox != '') {
childComboBox.store.proxy = new Ext.data.MemoryProxy(myData);
childComboBox.getStore().load();
childComboBox.getStore().reload();
childComboBox.reset();
childComboBox.doQuery('', true);
}
SetComboBoxValue(txtId, childValue);
}
好了，现在一个动态无刷新的Tree，并将tree节点中的相关信息显示到对应的控件中的功能就算完成了。
