easyui中datagrid formatter:function直接返回<a>xx</a>无法应用easyui样式
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了easyui中datagrid formatter:function直接返回<a>xx</a>无法应用easyui样式相关的知识,希望对你有一定的参考价值。
就是我用datagrid做数据查询显示,想在查询出的数据后加上修改和删除,但是返回的标签无法应该easyui样式,怎么回事。
formatter:function(value, row, index)
var str = '<a id="searchMBtn" class="easyui-linkbutton" iconCls="icon-delete" hr ef="javascript:void(0)" style="width: 80px;">删除</a>';
return str;
显示出来的就是一个A标签,没有样式
<table id="parentingGrid" class="easyui-datagrid" title="亲子信息列表" style="width:100%;height:100%;"
data-options="rownumbers:true,singleSelect:true,url:'../parenting/getParentings.action',method:'get',toolbar:'#tb',loadMsg:'加载中,请稍候...',pagination:true,fit:true,pageSize:20">
<thead>
<tr>
<th data-options="field:'parName',width:100,sortable:true">姓名</th>
<th data-options="field:'age',width:80,align:'right'">年龄</th>
<th data-options="field:'parBirthday',width:180,align:'right',sortable:true">生日</th>
<th data-options="field:'sex',width:80,align:'right',sortable:true,formatter : function(value, rowData, rowIndex)
return value == true? '男' : '女';
">性别</th>
<th data-options="field:'parent',width:80,align:'right',sortable:true">家长</th>
<th data-options="field:'addr',width:180,align:'right',sortable:true">地址</th>
</tr>
</thead>
</table>
注意上面的 123点
参考技术B 能截个图看看你要达成的效果吗??这个我之前也遇到过。easyui datagrid中 formatter的用法
1.基本用法
单元格formatter(格式化器)函数,带3个参数:
value:字段值。
row:行记录数据。
index: 行索引。
$(‘#dg‘).datagrid({
columns:[[
{field:‘userId‘,title:‘User‘, width:80,
formatter: function(value,row,index){
if (row.user){
return row.user.name;
} else {
return value;
}
}
}
]]
});
(formatter这个属性属于列参数,意思就是对当前列的数据进行格式化操作,它是一个函数,有三个参数value,row和index。value: 代表当前单元格中的值。row:代表当前行。index: 代表当前行的下标。)
(1)value:可以在formatter函数中修改value的值,并在界面上展示修改后的值。 **注意:** 在这里对value的修改并不会改动后台数据,这个改动仅相当于对value的渲染。
(2)row:可以通过 row["field值"] 或者 row.field值 得到同一行其他列的值。可以是前面的列,也可以是后面的列。
(3)index:行索引。(项目中没用到过)
例:
当后台返回 ture 或者 false 时,下面的效果一样:
{field:‘usedFlag‘, title:‘可用标识‘,width:80,align:‘center‘,formatter: function(value,row,index){
if (row.usedFlag == ‘1‘){
return "可用";
} else if (row.usedFlag == ‘0‘) {
return "不可用";
} else {
return "未知状态[" + value + "]";
}
}},
{field:‘usedFlag‘, title:‘可用标识‘,width:80,align:‘center‘,formatter: function(value,row,index){
if (value == ‘1‘){
return "可用";
} else if (value == ‘0‘) {
return "不可用";
} else {
return "未知状态[" + value + "]";
}
}},
以上是关于easyui中datagrid formatter:function直接返回<a>xx</a>无法应用easyui样式的主要内容,如果未能解决你的问题,请参考以下文章
请教关于 EasyUi datagrid formatter后取值问题
请教关于 EasyUi datagrid formatter后取值问题
Easyui datagrid 单元格格式化函数formatter的使用