zoukankan html css js c++ java

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;  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="35%"><div id = "tree" class="divExt"></div></td>
            <td valign="top" style="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=" 166px;" />
                <input type="text" id="parentCode" class="findinput" style="display:none" disabled="disabled" style=" 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=" 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=" 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=" 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=" 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,
                // 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- 0px; border-left- 0px;'
          + 'border-bottom- 0px; border-right- 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',
//     80
//});
//Pputin.on('click', function () {
////提交操作
//    SavePanelInfo();
////重置
//    ResetPanelInfo();
//});

//保存按钮
var Psave = new Ext.Button({
    //anchor : '80%',
    text: '保 存',
    x: 286,
    y: 240,
    style: 'position:absolute',
     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',
     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- 0px; border-left- 0px;'
          + 'border-bottom- 0px; border-right- 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',
                     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',
                         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',
             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',
             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',
             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: {
                 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,
        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节点中的相关信息显示到对应的控件中的功能就算完成了。

查看全文

相关阅读:
存储过程参数传递
 iCkeck插件
 单点登录
 SQL数据库默认实例与命名实例的区别
 IE浏览器重复提交ajax请求有缓存
 IE里Iframe的Cookie问题解决办法总结
 微信公众服务号开发
 解析url参数含有特殊字符的情况
 使用客户端控件展示增删改查操作
 修改网站web.config后出现奇怪问题找不到网页

原文地址：https://www.cnblogs.com/jasonjiang/p/2307118.html