| 组件 | 多选弹出框组件 | 备注 | ||
| 功能说明 | 基于jQuery开发的多选组件，其特点如下： 1、支持待选数据和已选数据的分开展示； 2、使用ajax获取待选数据； 3、支持已选数据的拖拽排序； 4、支持待选数据和已选数据的拖拽交换； 5、使用json格式自动返回所需数据； 6、支持分页显示数据及数据查询； 7、常用于多浏览按钮（如多人员、多文档等）的展示选择 |
|||
| 使用说明 | 1.引入如下js 如果没有引入以下js，那么需要引入以下js： <!–以下是显示定制组件所需的js –> <script language=javascript src=”/workplan/calendar/src/Plugins/jquery.form_wev8.js”></script> <script type=”text/javascript” src=”/js/ecology8/base/jquery-ui_wev8.js”></script> <script type=”text/javascript” src=”/js/dragBox/ajaxmanager_wev8.js”></script> <script type=”text/javascript” src=”/js/dragBox/rightspluingForBrowser_wev8.js”></script> <link type=”text/css” href=”/js/dragBox/e8browser_wev8.css” rel=stylesheet> |
|||
| 2、删除原来用于显示数据的内容，主要是<table class=BrowserStyle>中的内容，然后添加如下代码：
<tr> |
||||
| 3、定义如下js方法，可以另外定义在js文件中 function showMultiDocDialog(selectids){ var config = null; config= rightsplugingForBrowser.createConfig(); config.srchead=[“标题”,”主目录”,”文档所有者”]; config.container =$(“#colShow”); config.searchLabel=””; config.hiddenfield=”id”; config.saveLazy = true; config.srcurl = “/docs/docs/MutiDocBrowserAjax.jsp?src=src”; config.desturl = “/docs/docs/MutiDocBrowserAjax.jsp?src=dest”; config.pagesize = 10; config.formId = “weaver”; config.target = “queryIframe”; config.parentWin = window.parent.parent; config.selectids = selectids; config.searchAreaId = “e8QuerySearchArea”; jQuery(“#colShow”).html(“”); rightsplugingForBrowser.createRightsPluing(config); jQuery(“#btnok”).bind(“click”,function(){ rightsplugingForBrowser.system_btnok_onclick(config); }); jQuery(“#btnclear”).bind(“click”,function(){ rightsplugingForBrowser.system_btnclear_onclick(config); }); jQuery(“#btncancel”).bind(“click”,function(){ rightsplugingForBrowser.system_btncancel_onclick(config); }); jQuery(“#btnsearch”).bind(“click”,function(){ rightsplugingForBrowser.system_btnsearch_onclick(config); }); } function btnOnSearch(){ |
绿色部分是可变的，srcurl是获取源数据项的地址，desturl是获取已选数据的地址，formId是查询条件的form, target为form所在的iframe的ID，默认为window |
|||
| 4、调用如下方法： jQuery(document).ready(function(){ showMultiDocDialog(“<%=documentids%>”); }); 5、定义数据源页面，如/docs/docs/MutiDocBrowserAjax.jsp，该页面以json的格式返回数据，结构如下： 6、效果图如下： |
||||
| 例子 | 例子：http://192.168.4.44:8080/systeminfo/BrowserMain.jsp?mouldID=doc&url=/docs/docs/MutiDocBrowser.jsp?documentids= | |||
| 组件初始化参数 | 是否必须 | 类型 | 描述 | |
| okCallbackFn | 否 | Function | 若提供该方法，则调用自定义方法进行确定数据处理，该方法传递4个参数，config对象、选中的json对象，构造好的值选项、选中json对象的key值数组。 | |
| config | ||||
| destMap | 选中的节点数据 | |||
| {id:ids,name:names} | 构造好的选中的节点数据 | |||
| destMapKeys | destMap的key的集合 | |||
| clearCallbackFn | 否 | Function | 若提供该方法，则调用自定义方法进行清除数据处理，该方法传递4个参数，config对象、选中的json对象，构造好的值选项、选中json对象的key值数组。 | |
| config | ||||
| destMap | ||||
| {id:””,name:””} | ||||
| destMapKeys | ||||
| formatCallbackFn | 否 | Function | 自定义格式化数据，该方法传递3个参数，config对象、选中json对象的key值数组、选中的json对象，需返回一个json结构，格式固定：{id:”1,2,3″,name:”李,张,王”} | |
| config | ||||
| destMap | ||||
| destMapKeys | ||||
转载请注明：赫非域 » ecology开发之多选弹出框组件