加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

EasyUI 结合富文本Kindeditor,在datagrid显示富文本内容

(2014-09-17 19:00:18)
标签:

easyui

datagrid

kindeditor

富文本

tooltip

分类: EasyUI

  需求:

 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行高
                                        if(countSubstr(htmlValue,"p",true)<=8){//小于等于8行
                                                   
                                          tdContent.children("div").css({
                                             height:parseInt(countSubstr(htmlValue,"p",true))*20,//设置默认行高
                                            "overflow-y":"auto"
                                          });
                                       
                                }else{//大于8行
                                    tdContent.children("div").css({
                                         height:160,//设置默认行高
                                        "overflow-y":"auto"
                                       });
                                }
                                 
                                 //设置单元格元素 精确定位到div里的 p元素样式
                                 tdContent.children("div").addClass("div_p");// 【添加div_p类  div p 行间距 】
                                    
                                    
                                  
                            }
                           
                                            //设置  remark 单元格的行距 及 对齐方式
                                 if(textValueRemark.length!=0){
                                  //设置单元格行高
                                                    if(countSubstr(htmlValueRemark,"p",true)<=8){//小于等于8行
                                           tdRemark.children("div").css({
                                         height:parseInt(countSubstr(htmlValueRemark,"p",true))*20,//设置默认行高
                                        "overflow-y":"auto"
                                       
                                       });
                                       
                                }else{//大于8行
                                    tdRemark.children("div").css({
                                         height:160,//设置默认行高
                                        "overflow-y":"auto"
                                       });
                                }
                  
                                 //设置单元格元素 精确定位到div里的 p元素样式
                                 tdRemark.children("div").addClass("div_p");// 【添加div_p类  div p 行间距 】
                                
                            }
                              //不为空的 设置其tooltip方法
                              if(textValue!=""){
                                    tdContent.children("div").tooltip({  
                                                        position: 'right',    
                                                        onShow: function(e){ 
                                                          if(countSubstr(htmlValue,"p",true)>0){
                                                                tdContent.children("div").tooltip('update',htmlValue);//更新
                                                                tdContent.children("div").tooltip('tip').addClass("div_p");// 【添加div_p类  div p 行间距 】
                                                         }
                                                       
                                                      }); 
                              }
                         
                              //不为空的 设置其tooltip方法
                              if(textValueRemark!=""){
                                    tdRemark.children("div").tooltip({  
                                                        position: 'left',    
                                                        onShow: function(e){ 
                                                           if(countSubstr(htmlValueRemark,"p",true)>0){
                                                             tdRemark.children("div").tooltip('update',htmlValueRemark);//更新
                                                             tdRemark.children("div").tooltip('tip').addClass("div_p");// 【添加div_p类  div p 行间距 】
                                                            
                                                       
                                                      }); 
                              }
                       
                         });
                        
                        
                        
                       }
                         }//onsuccess

 

qq:1028344078

0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有