EasyUI datagrid之rowStyler,formatter函数

前言

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

代码

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');
		}
	})`

小结

  及时总结。