使用easyuio的一个demo

来源：互联网发布：淘宝怎样积累粉丝编辑：程序博客网时间：2024/06/05 17:08

可实现列表的分页、标题的排序、行编辑等

function loadUser(filter,cont){    $('#userListWinData').datagrid({        striped:'true',        singleSelect:false,//为true时只能选择单行        loadMsg : '数据加载中......',        url:$.contextPath+"/userOp_getUserList",        checkbox:true,        fit:false,        height:'auto',        pagination : true,        remoteSort:false,        rownumbers: true,        pageSize:10,        pageList:[10,20,30,50,100],        displayMsg:"显示从 {from}条 到 {to}条 总共 {total} 第",        queryParams:{            filter:filter,            cont:cont        },        onSortColumn:function (sorts,order){            sort('userListWinData',sorts,order);//调用排序方法。        },        //showFooter:true,        columns:[[{            field:'ck',            checkbox:true        },{            title:'名称',            field:'username',            width:180,            align:'center',            sortable:true        },{            title:'角色',            field:'role',            width:150,            align:'center',            sortable:true,            formatter: function (value, row, index) {                if (row.role=='TAESUSER1') {                    var a = "初级学生"                } else if(row.role=='TAESUSER2'){                    var a = "高级学生"                }else  if(row.role=='TAESCTRL'){                    var a = "教师用户"                }else if(row.role=='ADMIN'){                    var a = "管理员"                }                return a;            },            editor:{                type:'combobox',                    options:{                        on:'p',                        off:'',                    url: $.contextPath + "/userOp_getRoleList",                        method: 'get',                        valueField: 'desc',                        formatter:function(value,row){                            if(value.desc=="TAESUSER1"){                                return "初级学生";                            }else if(value.desc=="TAESUSER2"){                                return "高级学生";                            }else if(value.desc=="TAESCTRL"){                                return "教师用户";                            }else if(value.desc=="ADMIN"){                                return "管理员";                            }                        },                        width: 150,                        panelWidth: 150,                        panelHeight: 150,                        editable: false,//用户是否可以直接输入                        onSelect: function () {                        var  varSelect = $(this).combobox('getValue');                            if(varSelect=="TAESUSER1"){                                $(this).combobox('setText','初级学生')                            }else if(varSelect=="TAESUSER2"){                                $(this).combobox('setText','高级学生')                            }else if(varSelect=="TAESCTRL"){                                $(this).combobox('setText','教师用户')                            }else if(varSelect=="ADMIN"){                               $(this).combobox('setText','管理员')                            }                        },                        onLoadSuccess: function () {                            //this.SelectedIndex = -1                            varSelect = $(this).combobox('getValue');                            if(varSelect=="TAESUSER1"){                                $(this).combobox('setText','初级学生')                            }else if(varSelect=="TAESUSER2"){                                $(this).combobox('setText','高级学生')                            }else if(varSelect=="TAESCTRL"){                                $(this).combobox('setText','教师用户')                            }else if(varSelect=="ADMIN"){                                 $(this).combobox('setText','管理员')      //                        $(this).combobox('setText',$.i18n.prop('administrators'))                            }                        },                            //加载完成后,设置选中的数据                       /* var val = $(this).combobox("getData");                        for (var item in val[0]) {                            if (item == "osType") {                                $(this).combobox("select", val[0][item]);                            }                        }*/                    }                }        },{            title:'邮件',            field:'email',            width:215,            align:'center',            editor:'text',            sortable:true        },{           title:'手机号码',            field:'phonenumber',            width:175,            editor:'text',            align:'center',            sortable:true        },            {            title: '操作',            width: 150,            align:'center',            field: '_op',            formatter: function (value, row, index) {                if (row.editing) {                    var s = "<a href='javascript:void(0)' onclick='saverow(this)'>保存</a>";                    var c = '<a href="javascript:void(0)" onclick="cancelrow(this)">取消</a>';                    return s +' | '+ c;                } else {                    var e = '<a href="javascript:void(0)" onclick="editrow(this)">修改</a> ';                    return e;                }            }        }    ]],        onBeforeEdit:function(index,row){            row.editing = true;            updateActions(index);        },        onAfterEdit:function(index,row){            row.editing = false;         /*  if(row.role==1){                row.role="TAESUSER1";            }else if(row.role==2){                row.role="TAESUSER2";            }else if(row.role==3){                row.role="TAESCTRL";            }else if(row.role==4){               row.role="ADMIN";           };*/           if(check(row.email) || row.email==""){            if(checkPhone(row.phonenumber) || row.phonenumber==""){                TeJax({                    url:$.contextPath+"/userOp_updateUser",                    //dataType:"Json",                    async:true,                    data:{                        'account':row.username,                        'email':row.email,                        'phone':row.phonenumber,                        'role':row.role                    },                    success:function(rel){                        loadUser('','');                    },                    error: function (XMLHttpRequest, textStatus, errorThrown) {                        $.messager.alert('错误','删除用户失败，请检查网络状况。','error');                        if(logOn) console.log("forceLogout XMLHttpRequest.readyState:" + XMLHttpRequest.readyState+" textStatus:" + textStatus+" errorThrown:" + errorThrown);                    }                });            }else{                $.messager.alert('错误','电话验证不通过，保存失败。','error');                loadUser('','');            }           }else{               $.messager.alert('错误','邮箱验证不通过，保存失败。','error');               loadUser('','');           }            $('#userListWinData').datagrid('refreshRow', index);        },        onCancelEdit:function(index,row){            row.editing = false;         updateActions(index);        },        toolbar:'#user_tb',        onLoadError:function(){            $.messager.alert('错误','无法查询到指定信息！','error',function(){                loadUser('','');            });        }    })}

//修改用户信息function editrow(target){    $('#userListWinData').datagrid('beginEdit', getRowIndex(target));}function saverow(target){    $('#userListWinData').datagrid('endEdit', getRowIndex(target));}function cancelrow(target){    $('#userListWinData').datagrid('cancelEdit', getRowIndex(target));}function getRowIndex(target){    var tr = $(target).closest('tr.datagrid-row');    return parseInt(tr.attr('datagrid-row-index'));}

function updateActions(index){    $('#userListWinData').datagrid('updateRow',{        index: index,        row:{}    });}function  sort(obj,sortName,sortOrder){    var queryParams = $('#'+obj).datagrid('options').queryParams;    queryParams.sortName = sortName;    queryParams.sortOrder = sortOrder;    $('#'+obj).datagrid('reload');}

后台Action部分

/**     * 查找用户,返回列表     * @return     */    public String getUserList() {        log.loger.info("getUserList start");        String filter = super.request("filter");        String cont = super.request("cont");        log.loger.info("filter "+filter+" cont "+cont);    int page = Integer.parseInt(super.request("page"));int rows = Integer.parseInt(super.request("rows"));//默认页数是从第一页开始 page=1 每页10条记录 rows=10//log.loger.info("page "+page+" rows "+rows);        try {//            log.loger.info("filter="+filter+"  cont="+cont);            JSONObject roleJson = JSONObject.fromObject(ROLE);            Iterator it = roleJson.keys();            List<String> keyList = new ArrayList<>();            while (it.hasNext()) {                String key = it.next().toString();                keyList.add(key);            }            for(int i=0;i<keyList.size();i++){                if(cont.equalsIgnoreCase(roleJson.getString(keyList.get(i)))){                    cont = keyList.get(i);                }            }                        int total=userManager.getTotalUserPageByFilterAndCont(filter,cont);            //分页查询用户            List<UserBean>list=userManager.getUserPageByFilterAndCont(page,rows,filter,cont);            jsonMap = new JSONObject();            Map<Object, Object> map = new HashMap<>();            if(null !=list && list.size()>0){              map.put("total", total);                  map.put("rows", list);            }else{              map.put("total", 0);                  map.put("rows", "");            }                      jsonMap = JSONObject.fromObject(map);        }catch (Exception e){            log.loger.info("getUserList user fail");        }        return SUCCESS;    }

0 0