datagrid中使用formatter格式化easyui样式不生效解决方案

最新推荐文章于 2021-02-22 09:40:42 发布

Traver1121

最新推荐文章于 2021-02-22 09:40:42 发布

阅读量1.3k

点赞数

分类专栏： .net学习空间文章标签： easyui javascript html

本文链接：https://blog.csdn.net/Traver1121/article/details/111246591

版权

.net学习空间专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了在Datagrid中，由于formatter在页面渲染后执行，导致样式不生效的解决方案。作者提供了在onLoadSuccess回调中使用$.parser.parse()重置easyui组件的方法，以确保自定义样式正确应用。

摘要由CSDN通过智能技术生成

datagrid中formatter是在页面渲染后才执行，因此直接在formatter里使用datagrid自己的样式无法或者easyui自带样式无法生效

解决方案：

在onLoadSuccess方法里使用解析器重新解析页面中所有定义为easyui组件的节点。

解析器有两种用法：

$.parser.parse();不带任何参数。这种情况下默认是解析页面中所有定义为easyui组件的节点。
$.parser.parse('#cc'); 带一个jquery选择器。通过这种方式我们可以只解析我们局部定义的easyui组件，
需要说明的这个jquery选择器必须是你解析组件的父级以上的节点。也就是说这个查找出来的节点相当于一个容器，它只会解析容器里面的内容。

$('#dg').datagrid({
url: "../ashx/siteconfig/site_wireimg.ashx?method=transwireimg&CP_ID=" + ID + "",
fitColumns: "true",
striped: true,
size: { w: 4, h: 40 },
rownumbers: true,
checkOnSelect: 'true',
columns: [[{
field: 'WIREIMG_ID',
title: '选择文件',
width: 50,
checkbox: true
}, {
field: 'TransNO',
title: '变压器编号',
align: 'center',
width: 80

}, {
field: 'ImgName',
title: '文件名称',
width: 100,
align: 'center',
formatter: function (value, row, index) {
if (row.ImgName == "" || row.ImgName == null) {
return "<input type=\"text\" disabled=\"disabled\" class=\"easyui-textbox\" id=\"name" + index + "\" style=\"width:100%\"/>";
}
else {
return "<input type=\"text\" disabled=\"disabled\" class=\"easyui-textbox\" id=\"name" + index + "\" value=" + row.ImgName + " style=\"width:100%\"/>";
};

}
}, {
field: 'Width',
title: '文件（宽）',
width: 80,
align: 'center',
formatter: function (value, row, index) {
if (row.Width == "" || row.Width == null) {
return "<input type=\"text\" class=\"easyui-textbox\" id=\"fileWidth" + index + "\" style=\"width:90%\"/>px";
}
else {
return "<input type=\"text\" class=\"easyui-textbox\" id=\"fileWidth" + index + "\" value=" + row.Width + " style=\"width:90%\"/>px";
}

}
}, {
field: 'Height',
title: '文件（高）',
width: 80,
align: 'center',
formatter: function (value, row, index) {
if (row.Height == "" || row.Height == null) {
return "<input type=\"text\" class=\"easyui-textbox\" id=\"fileHeight" + index + "\" style=\"width:90%\"/>px";
}
else {
return "<input type=\"text\" class=\"easyui-textbox\" id=\"fileHeight" + index + "\" value=" + row.Height + " style=\"width:90%\"/>px";
}

}
}, {
field: 'LowerLimits',
title: 'HTML文件',
width: 150,
align: 'center',
formatter: function (value, row, index) {
return "<input class=\"easyui-filebox\" name=\"gridfile" + index + "\" id=\"FileUp" + index + "\" data-options=\"onChange:function(){GirdFile(this," + index + ")},buttonText:'浏览',prompt:'请选择图片...'\" style=\"width:90%\">";
}
}, {
field: 'EarlyWarnings',
title: '图片文件',
width: 150,
align: 'center',
formatter: function (value, row, index) {
return "<input class=\"easyui-filebox\" name=\"gridPic" + index + "\" id=\"PicUp" + index + "\" data-options=\"onChange:function(){GirdFilePic(this)},buttonText:'浏览',prompt:'请选择图片...'\" style=\"width:90%\">";

}
}, {
field: 'WireImgType',
title: '是否动态优先',
width: 80,
align: 'center',
formatter: function (value, row, index) {
if (value == "0") {
return "<input name=\"bm" + index + "\" id=\"bm" + index + "\" type=\"checkbox\" value=\"0\" checked=\"True\" />是否动态优先";
}
else {
return "<input name=\"bm" + index + "\" id=\"bm" + index + "\" type=\"checkbox\" value=\"0\" />是否动态优先";
}
}
}, {
field: 'CreateDate',
title: '上传时间',
width: 100,
align: 'center'
}]],
onLoadSuccess: function (data) {
$.parser.parse();//重新加载页面中所有定义为easyui组件的节点
}