设为首页收藏本站

jQuery MiniUI

 找回密码
 立即注册
jQuery MiniUI › 论坛 › MiniUI › 技术交流 › miniui drawcell属性
返回列表 发新帖
查看: 2921|回复: 6
打印 上一主题 下一主题

miniui drawcell属性 [复制链接]

renle

Rank: 2
跳转到指定楼层
楼主
发表于 2016-11-17 11:39:40 |只看该作者 |倒序浏览
本帖最后由 renle 于 2016-11-17 11:41 编辑

超极版主，麻烦请教您一个问题，我现在的需求是这样的，我想要在我的Grid里面给某列加上水印标签，最开始水印标签为背景图片，但是不符合要求，我就想着用文字做水印来代替，类似于word里面的水印那样，但是我现在遇到了两个问题：①当我用        e.cellHtml = "<div class='john'>项目报备</div>"这个属性去设置的时候，我Grid里面原有的数据就会被挤掉，就如同我贴的图中显示的一样，请问一下有没有可以使数据和水印两者共生的方法；②如果有类似的方法我该如何达到我图中所示的效果【需求如图：需要加水印.png】，还望超级版主可以解答我的疑惑，谢谢您❀❀❀
附件: 你需要登录才可以下载或查看附件。没有帐号？立即注册

举报

dforce

Rank: 8Rank: 8
沙发
发表于 2016-11-17 12:24:34 |只看该作者
绘制都是基于一个单元格的绘制，不能跨行，
e.cellHtml绘制就是整个单元格内容
你可以绘制一个复杂的html元素

举报

renle

Rank: 2
板凳
发表于 2016-11-17 13:11:29 |只看该作者
dforce 发表于 2016-11-17 12:24
绘制都是基于一个单元格的绘制，不能跨行，
e.cellHtml绘制就是整个单元格内容
你可以绘制一个复杂的html元 ...

大神，您说的我还不是特别明白，意思就是如果用Drawcell是可以满足我现在的要求的，但是那个drewcell绘制出来的内容与我解析出来的内容不能同时存在这个问题有办法解决吗

举报

dforce

Rank: 8Rank: 8
地板
发表于 2016-11-17 14:06:53 |只看该作者
renle 发表于 2016-11-17 13:11
大神，您说的我还不是特别明白，意思就是如果用Drawcell是可以满足我现在的要求的，但是那个drewcell绘制 ...

我的意思是drawcell绘制的是所有内容包括你说的水印+内容
比如你可以绘制'<div class="...">+e.cellHtml+</div>'

举报

renle

Rank: 2
5#
发表于 2016-11-17 15:14:38 |只看该作者
dforce 发表于 2016-11-17 14:06
我的意思是drawcell绘制的是所有内容包括你说的水印+内容
比如你可以绘制'+e.cellHtml+' ...
  1. <!--
  2.         作者：18182561979@163.com
  3.         时间：2016-11-17
  4.         描述：测试加上水印部分
  5. -->
  6. <!DOCTYPE html>
  7. <html lang="zh">
  8. <head>
  9.     <meta charset="utf-8">
  10.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  11.     <meta name="viewport" content="width=device-width, initial-scale=1">
  12.     <title></title>
  13.     <script src="/Scripts/boot.js?version=<%=AppVersion%>" type="text/javascript"></script>
  14.     <script src="/Scripts/PlatForm/ComTools.js?version=<%=AppVersion%>" type="text/javascript"></script>
  15.     <script src="/Scripts/PlatForm/SingleForm.js?version=<%=AppVersion%>" type="text/javascript"></script>
  16.     <script src="/Scripts/PlatForm/Test.js?version=<%=AppVersion%>" type="text/javascript"></script>
  17.     <script src="/Form/Init/7b956453-1f23-4ba8-856b-7f4fe71e7000/edit/"></script>
  18.     <script type="text/javascript" hasvelocity="true">
  19.         var OpenFormId = "85EE6C29-4AEF-466C-954C-D5CFACDF2134";
  20.         var FormId = "7b956453-1f23-4ba8-856b-7f4fe71e7000";
  21.         var FormState = "edit";
  22.         var KeyValue = "";
  23.     </script>
  24.     <style type="text/css">
  25.             .john{
  26.                      width:70px;height:20px;overflow:hidden;margin:auto;
  27.                      /*background-image:url(//www.baidu.com/img/bd_logo1.png);*/
  28.                      text-align:center;
  29.                  display:block;
  30.             }
  31.     </style>
  32. </head>

  34. <body>
  35.     <div class="row-wrap">
  36.         <div class="row  row-hd row-hd-responsive" style="height: 100%">
  37.             <div class="col-md-12 col-hd-12">
  38.                 <div class="portlet box blue" style="height: 100%;">
  39.                     <div class="portlet-title">
  40.                         <div class="captiontools">
  41.                             <a class="mini-button blue" id="Department.AddForm" onclick="add"><i class="fa fa-plus"></i>新增</a><!--新增-->
  42.                             <a class="mini-button blue" id="treegrid1.Delete" onclick="onRemoveNode"><i class="fa fa-trash-o"></i>删除</a><!--删除-->
  43.                             <a class="mini-button blue" id="treegrid1.EditForm" onclick="edit"><i class="fa fa-pencil"></i>编辑</a><!--编辑-->
  44.                             <a class="mini-button blue" id="Department.ViewForm" onclick="PowerForm.OnBtnViewForm(this, OpenFormId)"><i class="fa fa-eye"></i>查看</a><!--查看-->
  45.                             <a class="mini-button blue" id="treegrid1.Refresh" onclick="PowerForm.OnBtnRefresh(this)"><i class="fa fa-refresh"></i>刷新</a><!--刷新-->
  46.                             <a class="mini-button blue" id="up" onclick="PowerForm.OnBtnMoveUp(this)"><i class="fa fa-arrow-up"></i>上移</a><!--上移-->
  47.                             <a class="mini-button blue" id="down" onclick="PowerForm.OnBtnMoveDown(this)"><i class="fa fa-arrow-down"></i>下移</a><!--下移-->

  49.                             <a class="mini-button blue" id="treegrid1.MoveLeft" onclick="PowerForm.OnBtnMoveLeft(this)"><i class="fa fa-arrow-left"></i>左移</a><!--左移-->
  50.                             <a class="mini-button blue" id="treegrid1.MoveRight" onclick="PowerForm.OnBtnMoveRight(this)"><i class="fa fa-arrow-right"></i>右移</a><!--右移-->
  51.                         </div>
  52.                         <div class="actions">
  53.                         </div>
  54.                     </div>
  55.                     <div class="portlet-body" style="height: 70%;">
  56.                         <div id="treegrid1" class="mini-datagrid" style="width:100%;height:100%;"     
  57.                         showTreeIcon="true" treeColumn="taskname" idField="UID" parentField="ParentTaskUID"
  58.                         resultAsTree="false"  allowResize="true" expandOnLoad="true"
  59.                         url="部门管理测试.txt">
  60.                                 <div property="columns">
  61.                                     <div type="indexcolumn"></div>
  62.                                     <div name="taskname" field="Name" width="160" align="center">任务名称</div>
  63.                                     <div field="PercentComplete" width="80">进度</div>
  64.                                     <div field="Duration" width="60" align="right">工期</div>
  65.                                     <div field="Start" width="80" dateFormat="yyyy-MM-dd">开始日期</div>
  66.                                     <div field="Finish" width="80" dateFormat="yyyy-MM-dd">完成日期</div>                  
  67.                                 </div>
  68.                             </div>

  70.                         </div>
  71.             </div>
  72.         </div>
  73.     </div>
  74. </div>
  75. <!--<script src="/Scripts/PlatForm/data.js" type="text/javascript"></script>-->
  76. <script type="text/javascript">
  77.                 mini.parse();
  78.                    var grid = mini.get("treegrid1");
  79.                    grid.load();
  80.                 ////////测试水印部分
  81.                  grid.on("drawcell", function (e) {
  82.          var record = e.record,
  83.           column = e.column,
  84.           field = e.field,
  85.           value = e.value;
  86.            if (column.field == "Name") {
  87.               e.cellStyle = "background:url('s.jpg') no-repeat 20px center";
  88.            }
  89.            if(column.field=="Duration"){
  90.                 e.cellStyle="background:#fbfb72";
  91.            }
  92.            if(column.field=="PercentComplete"){
  93.                    e.cellStyle="background:#f7c56a";
  94.            }
  95.            if(column.field=="Start"){
  96.                    e.cellStyle="background:#8383ff";
  97.            }
  98.         });
  99. </script>
  100. <script type="text/javascript">         
  101.    var PowerForm = new SingleForm();
  102.    mini.parse();
  103.    var grid = mini.get("treegrid1");
  104.    grid.load();
  105.     </script>
  106. </body>
  107. </html>
复制代码
大神，请您原谅我的无知，还是没有很好地理解，代码奉上，求您指点

举报

dforce

Rank: 8Rank: 8
6#
发表于 2016-11-17 16:12:07 |只看该作者
renle 发表于 2016-11-17 15:14
大神，请您原谅我的无知，还是没有很好地理解，代码奉上，求您指点

.bc
       {
           width:100%;height:100%;
           }
       .bc-text
       {
           display:inline-block;
           position:absolute;
           right:0;
           margin-right:0;
           color:#aaa;
           }

grid.on("drawcell", function (e) {
        var record = e.record,
          column = e.column,
          field = e.field,
          value = e.value;
      
        if (column.field == "Duration") {
            e.cellHtml = '<div class="bc">'+value+'<div class="bc-text">项目资料</div></div>';
        }
        
    });

举报

renle

Rank: 2
7#
发表于 2016-11-17 16:20:54 |只看该作者
dforce 发表于 2016-11-17 16:12
.bc
       {
           width:100%;height:100%;

谢谢大神

举报

返回列表 发新帖

Archiver|普加软件

GMT+8, 2024-10-2 12:19 , Processed in 1.051170 second(s), 11 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部