四、dwr中util的使用

1、使用dwr.util可以非常方便的添加select的option和获取id的值，添加table的row等处理。

 

2、首先需要引入util.js

<script type="text/javascript" src="${pageContext.request.contextPath}/dwr/util.js"></script>

 

3、获取输入框的值

 

<script type="text/javascript">
        function calAdd() {
            var a = dwr.util.getValue("a");
            var b = dwr.util.getValue("b");
            MyDwr.add(parseInt(a),parseInt(b),function(data){
                alert(data);
            });
        }
 </script>

<input type="text" id="a"/>

<input type="text" id="b"/>

<input type="button" value="获取" onclick="calAdd()">

 

4、操作select下拉列表

    function initAddress() {
            dwr.util.removeAllOptions();
            var data = [{id:1,name:"北京"},{id:2,name:"天津"},{id:3,name:"上海"}];

            //address表示下拉列表的id，“id”表示取data中的id属性为key，“name”表示取name属性为value
            dwr.util.addOptions("address",data,"id","name");
     }

 

5、操作表格

        <table width="600" border="1">
            <thead>
                <tr>
                    <td>ID</td>
                    <td>username</td>
                    <td>groupName</td>
                </tr>
            </thead>
        <tbody id="user">
        </tbody>
    </table>

<input type="button" value="初始化用户" onclick="initUser()"/>

 

        function initUser() {
            MyDwr.list(function(data){
                dwr.util.addRows("user",data,cellFuncs,{ escapeHtml:false });
            });
        }

        //对数据的处理
        var cellFuncs=[
            function(data){return data.id},//第一列怎么显示
            function(data){return data.username},//第二列怎么显示
            function(data){return data.group.name}//第三列怎么显示
        ];

 

    public List<User> list(){
        List<User> list = new ArrayList<User>();
       
        User user = new User();
        user.setId(1l);
        user.setName("youyang");
        Group group = new Group();
        group.setId(1);
        group.setName("group1");
        user.setGroup(group);
        list.add(user);
       
        User user2 = new User();
        user2.setId(2l);
        user2.setName("youyang2");
        Group group2 = new Group();
        group2.setId(2);
        group2.setName("group2");
        user2.setGroup(group2);
        list.add(user2);
       
        return list;
    }