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

￡神魔★判官ぃ 2022-05-17 07:34 339阅读 0赞

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.效果图

![70][]

[70]: /images/20220517/f49b31ff93a846a786d2f9daca5f03b8.png