如何用树控件实现选人功能?

gaomingzhu
   2014-11-12 11:11:39发布  2017-02-22 10:02:55更新 1收藏, 3176浏览
ExMobi客户端技术
0

treedemo.zip(0.14M 下载次数:66)

我们在做移动办公类应用开发的时候,经常会有选人功能,那选人功能如何实现呢?

选人也分很多种,是单选还是多选?是一下子加载所有数据,还是异步加载的?选中后又怎么回传数据?如下我们一一解决。

首先在表单页面中设置一个input框和一个按钮。这个input框中是用来存放选择的人员数据;

点击button按钮进入选人页面,这里我把赋值对象的id当参数传到选人页面。因为一般同一个项目中,选人功能用的地方比较多,而且基本上是一样的请求。所以这边我们可以做一个通用的。

可能真实项目中,不只一个选人参数提交,可能有一个存放人员id的,一个存放人员名字的,那就多写几个input框,对于不可见的input框用type=hidden。

<input type="text" id="pers" readonly="true" style="width:75%"/>
<input type="button" value="选人" onclick="res:page/tree.xhtml?id=pers"/>

如果选人是单选的话,可以参考如下代码,

<html>
        <head>
                <title show="false"/>
                <link rel="stylesheet" type="text/css" href="res:css/global.css" />
                <link rel="stylesheet" type="text/css" href="res:css/control.css" />
                <script type="text/javascript"> <![CDATA[
                
                function queding(val){
                //获取到上个页面传过来的参数
                var param=window.getParameter("id");
                //获取到index页面,给指定的控件进行赋值。
                var wn = PageUtil.getWindowById("index");
                wn.document.getElementById(param).value=val;
                window.close();
                }
                
                
]]> </script>
        </head>
        <header>
                <titlebar caption="返回"  title="通讯录" iconhref="script:close" hidericon="true"/>
        </header>
         <body>
                <tree id="treeid" name="contacts" caption="研发部" value="研发部" href="queding('研发部')" style="margin:0 0 0 20dp;">
                        <item caption="部门经理" value="部门经理" href="queding('部门经理')"/>
                        <item caption="研发一" value="研发1" href="queding('研发1')">
                                <item caption="员工一"  value="员工1" href="queding('员工1')"/>
                                <item caption="员工二" value="员工2" href="queding('员工2')"/>
                                <item caption="员工三" value="员工3" href="queding('员工3')"/>
                                <item caption="员工四" value="员工4" href="queding('员工4')"/>
                                <item caption="员工五" value="员工5"  href="queding('员工5')"/>
                                <item caption="员工六" value="员工6" href="queding('员工16)"/>
                                <item caption="员工七" value="员工7"  href="queding('员工7')"/>
                                <item caption="员工八" value="员工8"  href="queding('员工8')"/>
                                <item caption="员工九" value="员工9"  href="queding('员工9')"/>
                        </item>
                </tree>
        </body>
</html>

如果人员是多选的话,可以参考如下示例代码:

<html>
        <head>
                <title show="false"/>
                <link rel="stylesheet" type="text/css" href="res:css/global.css" />
                <link rel="stylesheet" type="text/css" href="res:css/control.css" />
                <script type="text/javascript"> <![CDATA[
                
                function queding(){
                
                var treeObj = document.getElementById("treeid");

                    var list = treeObj.getSelectedItem();/*当 checkbox存在情况下返回选中节点treeitem列表数组*/

                    var text="";

                        for(i=0; i<list.length;i++){
                                        
                               //text= text +list[i].text+";";//取caption值
                               text= text +list[i].value+";";

                            }
                   //获取到上个页面传过来的参数id的值
                var param=window.getParameter("id");
                //获取index页面,给index页面里指定的控件进行赋值。
                var wn = PageUtil.getWindowById("index");
                wn.document.getElementById(param).value=text;
                window.close();
                }
                
                
                
                
                
                
                
                
]]> </script>
        </head>
        <header>
                <titlebar caption="返回"  title="通讯录" iconhref="script:close" rcaption="确定" riconhref="queding()"/>
        </header>
         <body>
                <tree id="treeid" name="contacts" checkbox="true" caption="研发部" value="研发部" style="margin:0 0 0 20dp;">
                        <item caption="部门经理" value="部门经理"/>
                        <item caption="研发一" value="研发1">
                                <item caption="员工一"  value="员工1" />
                                <item caption="员工二" value="员工2" />
                                <item caption="员工三" value="员工3" />
                                <item caption="员工四" value="员工4" />
                                <item caption="员工五" value="员工5" />
                                <item caption="员工六" value="员工6" />
                                <item caption="员工七" value="员工7" />
                                <item caption="员工八" value="员工8" />
                                <item caption="员工九" value="员工9" />
                        </item>
                        
                </tree>
        </body>
</html>

如果是异步加载数据的,可以参考如下代码:

<html>
        <head>
                <title show="false"/>
                <link rel="stylesheet" type="text/css" href="res:css/global.css" />
                <link rel="stylesheet" type="text/css" href="res:css/control.css" />
                <script type="text/javascript"> <![CDATA[
                
                function queding(val){
                //获取到上个页面传过来的参数
                var param=window.getParameter("id");
                //获取到index页面,给指定的控件进行赋值。
                var wn = PageUtil.getWindowById("index");
                wn.document.getElementById(param).value=val;
                window.close();
                }
                
                
                
                function jiazai(pid){
                //模拟的加载人员数据 
                //正式开发时应该发ajax请求,在回调中获取到json字符串,来增加树的子节点。
                var persdata='[{"id":"人员一","value":"人员1"},{"id":"人员二","value":"人员2"},{"id":"人员三","value":"人员3"}]';
                //获取节点
                var treeObj = document.getElementById("treeid");
                   var pitem = treeObj.getTreeItemById(pid);
                
                var jsondata=eval('('+persdata+')');
                //加载子节点
                for(var i=0;i<jsondata.length;i++){
                        var per=jsondata[i];
                    var item = new TreeItem();

                    item.text= per.id;

                    item.value= per.value;
                        item.href="queding('"+per.value+"')";
                      pitem.addTreeItem(item);
                }
                pitem.href="";

                   
                }
                
                
                
]]> </script>
        </head>
        <header>
                <titlebar caption="返回"  title="通讯录" iconhref="script:close" hidericon="true"/>
        </header>
         <body>
                <tree id="treeid" name="contacts" caption="研发部" value="研发部" style="margin:0 0 0 20dp;">
                        <item caption="部门经理" value="部门经理" href="queding('部门经理')"/>
                        
                        <item id="yf2" caption="研发二" value="研发2" href="jiazai('yf2')"/>
                </tree>
        </body>
</html>

上面都是用的树控件来实现选人功能。当然也可以用其他的控件来实现,比如用div自己拼写,或者用组织架构插件(原生插件),或者用listitem等等都可以,但是注意,如果用div自己拼写的话,适量用,div嵌套多了,会影响页面的加载速度。

下载APP
扫码下载栗子社区APP