EasyUI datagrid之rowStyler,formatter函数

绝地灬酷狼 2022-06-04 01:44 282阅读 0赞

# 前言 #

从后台查出数据后前台界面展示根据其中字段的值改变字体颜色，另一个是数据库存的不是汉字根据字段值显示汉字。

# 代码 #

1.利用rowStyler

rowStyler: function(index,row){
    	        if (row.b1_IsLimited=='1'||row.b1_PwdIsLimited=='1' ){
    	            return 'color:red';  
    	        }				
    	    }

2.formatter函数

formatter :function(value, row, index){
    				var btn;
    				if(value){
    					btn="锁定"
    				}else{
    					btn="正常"
    				}
    				return btn;
    			}

遇到问题：这两个字段在数据库中是bit类型显示的是true/false,我用true/false判断一直都没有效果，以为这个是加载完之后执行还试了试汉字一直也没有效果，试了别的字段可以，后来发现用0和1才能达到效果。

其实第二个问题我在mapper里用了case when在数据库中执行是能达到效果的，结果界面显示不是汉字，后台不行只能在前台做了。

3.完整代码

$('#dg').datagrid({
    		title : '账户管理信息',
    		fit : true,
    		height : 450,
    		url : 'user/Account/viewAccountList.do',
    		fitColumns : false,
    		striped : true, //隔行变色特性 
    		loadMsg : '数据正在加载,请耐心的等待...',
    		rownumbers : true,
    		pagination : true,
    		queryParams:Params,
    		singleSelect:false,
    		pageSize : 16,
    		pageList : [16,32],
    		rowStyler: function(index,row){
    	        if (row.b1_IsLimited=='1'||row.b1_PwdIsLimited=='1' ){
    	            return 'color:red';  
    	        }				
    	    },	
    	columns : [ [  
    		{field : 'ck',checkbox : true},
    		{field : 'b1_UserID',title : '用户标识',width : 180,align : 'center'}, 
    		{field : 'b1_UserName',title : '用户姓名',width : 100,align : 'center'}, 
    		{field : 'b1_IsLimited',title : '账户状态',width : 140,align : 'center',
    			formatter :function(value, row, index){
    				var btn;
    				if(value){
    					btn="锁定"
    				}else{
    					btn="正常"
    				}
    				return btn;
    			}}, 
    		{field : 'b1_PwdIsLimited',title : '密码状态',width : 130,align : 'center',
    				formatter :function(value, row, index){
    					var btn;
    					if(value){
    						btn="锁定"
    					}else{
    						btn="正常"
    					}
    					return btn;
    				}},
    		{field : 'b1_CreatTime',title : '创建时间',width : 140,align : 'center'}, 
    		{field : 'b4_Name',title : '隶属组织单元',width : 100,align : 'center'}, 
    		{field : 'b1_Remark',title : '备注信息',width : 100,align : 'center'},				
     		] ],
    		onLoadSuccess : function(data) {
    			if (!data.isOk) {
    				$.messager.alert("操作提示", data.errorMessage, "error");
    			} else {
    				$.messager.alert(row.b1_PwdIsLimited);
    				if (data.total < 1) {
    					$.messager.alert("操作提示", data.successMessage, "info");
    				}else{
    					 $(this).datagrid("fixRownumber"); 
    				}
    			}
    		},
    		onLoadError : function(XMLHttpRequest, textStatus, errorThrown) {
    			$.messager.alert('系统异常', textStatus + errorThrown, 'error');
    		}
    	})`

# 小结 #

及时总结。