欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

datagrid属性表格自定义表格样式,表格内自定义标签

程序员文章站 2022-04-29 17:41:38
...

1.自定义表格样式

columns:[[    
		{field:'permission',title:'编辑权限',width:100,
			 styler: function(value,row,index){
					if (value == "呵呵"){
						return 'color:red;';
					}
				}
		}
]]

2.表格内自定义html标签,采用formatter函数

columns:[[    
		{field:'permission',title:'编辑权限',width:100,
			formatter: function(value,row,index){
             var result = "";
			 if(value.substring(0,1)==1){
			    result +='体育<input id="'+row.userid+'-ty" type="checkbox" value="1" checked="checked">';
			  }else{
			    result +='体育<input id="'+row.userid+'-ty" type="checkbox" value="0">';
			 }
             if(value.substring(1,2)==0){
			    result +='年级<select id="'+row.userid+'-nj">
                   <option value="0">一年级</option>
                   <option value="1">二年级</option>
                   <option value="2">三年级</option>
                   <option value="3">四年级</option>
                </select>';
			  }
             if(value.substring(2,3)==1){
			    result +='美术<input id="'+row.userid+'-ms" type="checkbox" value="1" checked="checked">';
			  }else{
			    result +='美术<input id="'+row.userid+'-ms" type="checkbox" value="0">';
			 }
             
             if(value.substring(3,4)==1){
			    result +='数学<input id="'+row.userid+'-sx" type="checkbox" value="1" checked="checked">';
			  }else{
			    result +='数学<input id="'+row.userid+'-sx" type="checkbox" value="0">';
			 }
		}
    }
]]

3.效果图

datagrid属性表格自定义表格样式,表格内自定义标签