需求:
1.EasyUI
结合富文本Kindeditor,在datagrid的单元格显示富文本编辑保存的内容(html格式);
2.单元格内容高度,8行数据以下为 行数 乘以
20px,8行数据以上为160px,同时单元格自动显示垂直滚动条;
3.鼠标移动到单元格,将单元格的内容自动弹出显示在div上,利用tooltip技术;
4.富文本的编辑的内容包含特殊字符如单引号
' 等,正常显示(数据库SqlServer);
项目图片:
http://s15/mw690/0020IiuJgy6M7gALEGG7e&690结合富文本Kindeditor,在datagrid显示富文本内容" TITLE="EasyUI 结合富文本Kindeditor,在datagrid显示富文本内容" />
http://s4/mw690/0020IiuJgy6M7gAOuYj83&690结合富文本Kindeditor,在datagrid显示富文本内容" TITLE="EasyUI 结合富文本Kindeditor,在datagrid显示富文本内容" />
http://s8/mw690/0020IiuJgy6M7gAIh9517&690结合富文本Kindeditor,在datagrid显示富文本内容" TITLE="EasyUI 结合富文本Kindeditor,在datagrid显示富文本内容" />
源码:
(富文本:变更内容、备注两列单元格)
"p"其实指的是图片中,大家在以下代码相应替换即可。直接图片中的写法是
换行,因为博客是html格式
http://s8/mw690/0020IiuJgy6M7jaFhzx97&690结合富文本Kindeditor,在datagrid显示富文本内容" TITLE="EasyUI 结合富文本Kindeditor,在datagrid显示富文本内容" />
onLoadSuccess: function(data){ //【treegrid
function(row,data)】
if(data.total>0){//判断加载行数
var panel = $(this).datagrid('getPanel');//获取面板
var tr = panel.find('div.datagrid-body tr');
tr.each(function(){//each 每行
var tdContent =
$(this).children('td[field="recordContent"]');//recordContent的单元格Dom
var textValue =
tdContent.children("div").text();//文本内容
var htmlValue=tdContent.children("div").html();//html内容
var tdRemark =
$(this).children('td[field="remark"]');//remark的单元格Dom
var textValueRemark =
tdRemark.children("div").text();//文本内容
var htmlValueRemark=tdRemark.children("div").html();//html内容
//设置 recordContent 单元格的行距 及 对齐方式
if(textValue.length!=0){
//设置单元格div行高