使用easyuio的一个demo_easyui demo-CSDN博客

本文链接：https://blog.csdn.net/LH9898/article/details/71437059

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

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)' οnclick='saverow(this)'>保存</a>";
                    var c = '<a href="javascript:void(0)" οnclick="cancelrow(this)">取消</a>';
                    return s +' | '+ c;
                } else {
                    var e = '<a href="javascript:void(0)" οnclick="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;
    }