《关键字选取三步走：最后一步，一个页面多次使用+多次重新加载。
这里只写用法。 其他的代码实现都没有改动。
1.后台输出改动。 调用前提JS方法执行。
FineUI.PageContext.RegisterStartupScript("zhurukey(\"" + Server.UrlPathEncode(Server.UrlPathEncode(htmltext)) + "\");");
2.前台方法
function zhurukey(option) {
var string = decodeURIComponent(decodeURIComponent(option));
bandingkey(string);
}
3.bandingkey方法 实现了多次刷新加载。
| function bandingkey(string) { SaveArrayObjH = new Array(); SaveArrayObjQ = new Array(); jQuery("#" + IDS.ConclusionKey).html(string); jQuery("#" + IDS.ConclusionDIV).unbind(); jQuery("#" + IDS.ConclusionDIV).html(""); jQuery("#" + IDS.ConclusionDIV).tabControl({ maxTabCount: 35, tabW: 80, StorageArray: "SaveArrayObjH", targetID: IDS.ConclusionDIV, tipID: "tipH" }, ""); //多设置一个. jQuery("#" + IDS.ConclusionKey).multiselect({ selectedList: 4, StorageArray: "SaveArrayObjH", targetID: IDS.ConclusionDIV, tipID: "tipH", mulsel: IDS.ConclusionKey }).multiselect("refresh"); jQuery("#" + IDS.OmenKey).html(string); jQuery("#" + IDS.OmenDIV).unbind(); jQuery("#" + IDS.OmenDIV).html(""); jQuery("#" + IDS.OmenDIV).tabControl({ maxTabCount: 35, tabW: 80, StorageArray: "SaveArrayObjQ", targetID: IDS.OmenDIV, tipID: "tipQ" }, ""); //多设置一个. jQuery("#" + IDS.OmenKey).multiselect({ selectedList: 4, StorageArray: "SaveArrayObjQ", targetID: IDS.OmenDIV, tipID: "tipQ", mulsel: IDS.OmenKey }).multiselect("refresh"); jQuery("#" + IDS.textConclusion).unbind(); jQuery("#" + IDS.textOmen).unbind(); jQuery("#" + IDS.textConclusion).selectText({ StorageArray: "SaveArrayObjH", targetID: IDS.ConclusionDIV, tipID: "tipH" }); jQuery("#" + IDS.textOmen).selectText({ StorageArray: "SaveArrayObjQ", targetID: IDS.OmenDIV, tipID: "tipQ" }); } |
4. 整体页面的改动与新东西。
4.1 把ext的onReady做了改动。 发现onReady与 Jquery的那一种onReady完全不同。 只是用来做ext的初始加载的。 其加载的顺序在onload等价。
很多原本定义在ext onReady中的变量，直接拿出来放在其他位置也可以，并不影响。
4.2 多个控件之间传递绑定的话， 如果有一个要进行改动。 其他的控件也要一起进行重新的绑定才可以用。
页面代码：
| <script charset="gb2312" type="text/javascript" src="/Scripts/jquery-1.8.0.js"></script> <script type="text/javascript"> var jQuery = $.noConflict(true); //jquery重命名 var SaveArrayObjH = new Array(); var SaveArrayObjQ = new Array(); </script> <%--多选--%> <link rel="stylesheet" type="text/css" href="/Scripts/mutiselect/multiselectSrc/jquery.multiselect.css" /> <link rel="stylesheet" type="text/css" href="/Scripts/mutiselect/assets/style.css" /> <link rel="stylesheet" type="text/css" href="/Scripts/mutiselect/assets/prettify.css" /> <link rel="stylesheet" type="text/css" href="/Scripts/mutiselect/ui/jquery-ui.css" /> <script type="text/javascript" src="/Scripts/mutiselect/ui/jquery.ui.core.js"></script> <script type="text/javascript" src="/Scripts/mutiselect/ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="/Scripts/mutiselect/assets/prettify.js"></script> <script type="text/javascript" src="/Scripts/mutiselect/multiselectSrc/jquery.multiselect.js" charset="utf-8"></script> <%--关键字--%> <link rel="stylesheet" type="text/css" href="/Scripts/KeyTab/KeyTab.css" /> <script type="text/javascript" src="/Scripts/KeyTab/tabControl.js" charset="gb2312"></script> <script type="text/javascript" src="/Scripts/KeyTab/selectDIV.js" charset="gb2312"></script> </head> <body> <script type="text/javascript"> var IDS; function onReady() { } IDS = { txtAlarmID: '<%= txtAlarmID.ClientID %>', ddlDeviceType: '<%= ddlDeviceType.ClientID %>', textSolution: '<%= textSolution.ClientID %>', textOmen: '<%= textOmen.ClientID %>', textConclusion: '<%= textConclusion.ClientID %>', OmenKey: '<%= OmenKey.ClientID %>', ConclusionKey: '<%= ConclusionKey.ClientID %>', OmenDIV: '<%= OmenDIV.ClientID %>', ConclusionDIV: '<%= ConclusionDIV.ClientID %>' }; function bandingkey(string) { SaveArrayObjH = new Array(); SaveArrayObjQ = new Array(); jQuery("#" + IDS.ConclusionKey).html(string); jQuery("#" + IDS.ConclusionDIV).unbind(); jQuery("#" + IDS.ConclusionDIV).html(""); jQuery("#" + IDS.ConclusionDIV).tabControl({ maxTabCount: 35, tabW: 80, StorageArray: "SaveArrayObjH", targetID: IDS.ConclusionDIV, tipID: "tipH" }, ""); //多设置一个. jQuery("#" + IDS.ConclusionKey).multiselect({ selectedList: 4, StorageArray: "SaveArrayObjH", targetID: IDS.ConclusionDIV, tipID: "tipH", mulsel: IDS.ConclusionKey }).multiselect("refresh"); jQuery("#" + IDS.OmenKey).html(string); jQuery("#" + IDS.OmenDIV).unbind(); jQuery("#" + IDS.OmenDIV).html(""); jQuery("#" + IDS.OmenDIV).tabControl({ maxTabCount: 35, tabW: 80, StorageArray: "SaveArrayObjQ", targetID: IDS.OmenDIV, tipID: "tipQ" }, ""); //多设置一个. jQuery("#" + IDS.OmenKey).multiselect({ selectedList: 4, StorageArray: "SaveArrayObjQ", targetID: IDS.OmenDIV, tipID: "tipQ", mulsel: IDS.OmenKey }).multiselect("refresh"); jQuery("#" + IDS.textConclusion).unbind(); jQuery("#" + IDS.textOmen).unbind(); jQuery("#" + IDS.textConclusion).selectText({ StorageArray: "SaveArrayObjH", targetID: IDS.ConclusionDIV, tipID: "tipH" }); jQuery("#" + IDS.textOmen).selectText({ StorageArray: "SaveArrayObjQ", targetID: IDS.OmenDIV, tipID: "tipQ" }); } function zhurukey(option) { var string = decodeURIComponent(decodeURIComponent(option)); bandingkey(string); } </script> <div id="tipQ" style="display: none; position: absolute; z-index: 10"> <img src="/images/tick.png" width="30px" height="30px" /> </div> <div id="tipH" style="display: none; position: absolute; z-index: 10"> <img src="/images/tick.png" width="30px" height="30px" /> </div> |
使用控件集合位置的代码：
| <ext:FormRow ID="FormRow14" runat="server"> <Items> <ext:ContentPanel ID="testList1" Title="专家匹配前提关键字" runat="server" Width="650px"> <table> <tr> <td> <label> 匹配前提关键字:</label> </td> <td> <p> <select id="OmenKey" runat="server" name="example-basic"> </select> </p> </td> </tr> <tr> <td> <label> 关键字管理:</label> </td> <td> <div id="OmenDIV" runat="server"> </div> </td> </tr> <tr> <td> <label> 故障现象:</label> </td> <td> <ext:TextArea ID="textOmen" runat="server" Height="80px" Label="故障现象" EmptyText="故障现象" Width="550"> </ext:TextArea> </td> </tr> </table> </ext:ContentPanel> </Items> </ext:FormRow> |
OK！
本人声明：沐海（http://my.oschina.net/mahaisong） 以上文章是经过本人设计实践和阅读其他文档得出。如果需要探讨或指教可以留言！欢迎交流！