jQuery MiniUI自定义单元格

监听处理"drawcell"事件

使用"drawcell"事件,可以自定义单元格内容、样式、行样式等。

grid.on("drawcell", function (e) {
    var record = e.record,
        column = e.column,
        field = e.field,
        value = e.value;

    //格式化日期
    if (field == "birthday") {
        if (mini.isDate(value)) e.cellHtml = mini.formatDate(value, "yyyy-MM-dd");

    }

    //给年龄,增加"岁"字符串
    if (field == "age") {
        e.cellHtml = value + "岁";
    }

    //给帐号列,增加背景色
    if (field == "loginname") {
        e.cellStyle = "background:#ecedef";
    }

    //超过1万工资,红色标识
    if (field == "salary" && value >= 10000) {
        e.cellStyle = "color:red;font-weight:bold;";
    }

    //显示学历
    if (field == "educational") {
        for (var i = 0, l = Educationals.length; i < l; i++) {
            var edu = Educationals[i];
            if (edu.id == value) {
                e.cellHtml = edu.name;
                break;
            }
        }
    }

    //action列,超连接操作按钮
    if (column.name == "action") {
        e.cellStyle = "text-align:center";
        e.cellHtml = ‘<a href="javascript:edit(\‘‘ + record.id + ‘\‘)">Edit</a>&nbsp; ‘
                    + ‘<a href="javascript:del(\‘‘ + record.id + ‘\‘)">Delete</a>‘
    }

    //将性别文本替换成图片
    if (column.field == "gender") {
        if (e.value == 1) {
            e.cellHtml = "<span class=‘icon-female‘></span>"
        } else {
            e.cellHtml = "<span class=‘icon-boy‘></span>"
        }
    }

    //设置行样式
    if (record.gender == 1) {
        e.rowCls = "myrow";
    }
});

原文:http://www.miniui.com/docs/tutorial/datagrid_drawcell.html

function onDrawCell(e){
    var node = e.node,
        column = e.column,
        field = e.field,
        value = e.value;

    //格式化日期
    if (field == "Finish") {
        if (mini.isDate(value)) e.cellHtml = mini.formatDate(value, "yyyy年MM月dd日");
    }
    //工期
    if (field == "Duration") {
        e.cellHtml = value + "天";
    }
    //进度
    if (field == "PercentComplete") {
        e.cellHtml = ‘<div class="progressbar">‘
                        + ‘<div class="progressbar-percent" style="width:‘ + value + ‘%;"></div>‘
                        + ‘<div class="progressbar-label">‘ + value + ‘%</div>‘
                    +‘</div>‘;
    }
};

原文:http://www.miniui.com/docs/tutorial/treegrid_drawcell.html

时间: 2024-11-24 23:20:59

jQuery MiniUI自定义单元格的相关文章

IOS学习之——表视图3 自定义单元格

写在前面 今天看新闻,科比肩部撕裂,可能会提前退役,这个顽固的男人,终于要落幕了,虽然我不是他的球迷,也是心生敬仰,今天的主题就以科比为素材,向这位人生的斗士致敬. 前面我们讲到了tableview的单元格的系统自带的image label,用起来很方便,可是毕竟限制很多,这一篇将会讲到一个神奇的东西--自定义单元格,由你控制单元格显示的内容,位置,形式.如下图,我们要制作一个球星列表,需要四项信息:头像+姓名+年龄+性别 设置界面 拖控件,如下图 设置单元格高度,这里要讲一下高度有两个: 设置

浅谈DevExpress&lt;五&gt;:TreeList简单的美化——自定义单元格,加注释以及行序号

今天就以昨天的列表为例,实现以下效果:预算大于110万的单元格突出显示,加上行序号以及注释,如下图: 添加行序号要用到CustomDrawNodeIndicator方法,要注意的是,取得的节点索引是从0开始的,所以要+1以便第一行从一开始算起. private void treeList1_CustomDrawNodeIndicator(object sender, CustomDrawNodeIndicatorEventArgs e) { TreeList tree = sender as D

通过自定义单元格渲染器在Jtable中显示超链接

转载:http://www.tuicool.com/articles/qE7FNv 在JTable中自定义单元格渲染器是非常简单和容易的.对于单元格渲染器来说,它的主要任务就是为目标单元格返回一个Component对象,以呈现其内容.说到Component,就应该豁然开朗了,因为在Swing中,所有可在屏幕上显示的图形控件都是Component的直接或间接子类,也就是说,理论上你可以在JTable单元格中显示任意图形控件! 当然,实际上有一些控件是不能在单元格中显示的,比如JFrame这样的独立

Swift - 自定义单元格实现微信聊天界面

1,下面是一个放微信聊天界面的消息展示列表,实现的功能有: (1)消息可以是文本消息也可以是图片消息 (2)消息背景为气泡状图片,同时消息气泡可根据内容自适应大小 (3)每条消息旁边有头像,在左边表示发送方,在右边表示接收方 2,实现思路 (1)需要定义一个数据结构保存消息内容 MessageItem (2)继承UITableViewCell实现自定义单元格,这里面放入头像和消息体 (3)继承UITableView实现自定义表格,通过读取数据源,进行页面的渲染 (4)消息体根据内容类型不同,用不

自定义单元格(IOS)

自定义单元格有三种方法 - 代码实现 - xib - storyboard(推荐) 在故事板中操作方法为 1.在TableView属性的Prototype Cells设置为1,默认为1: 2.需要创建自定义的单元格类: 3.设定Table View Cell的Class为自定义类: 自定义类:(并不难) #import "CustomCell.h" @implementation CustomCell - (void)awakeFromNib { // Initialization c

自定义单元格

在cs代码中完成 自定义单元格 public class EmployeeCell : ViewCell { public EmployeeCell() { var image = new Image { HorizontalOptions = LayoutOptions.Start }; image.SetBinding(Image.SourceProperty, new Binding("ImageUri")); //设置宽高为40 image.WidthRequest = ima

iOS:UITableViewCell自定义单元格

UITableViewCell:自定义的单元格,可以在xib中创建单元格,也可以在storyBorad中创建单元格.有四种创建方式 <1>在storyBorad中创建的单元格,它是静态的单元格,单元格一开始就存在,可以直接根据自定义的重用标识名加载使用: <2>当然,storyBorad中单元格也可以关联一个自定义的类,这个类必须是继承UITableViewCell,这种情况下,直接根据自定义的重用标识名加载使用也是可以的. <3>在xib中创建的单元格,如果直接通过b

Objective-C:UITableViewCell自定义单元格

UITableViewCell:自定义的单元格,可以在xib中创建单元格,也可以在storyBorad中创建单元格.有四种创建方式 <1>在storyBorad中创建的单元格,它是静态的单元格,单元格一开始就存在,可以直接根据自定义的重用标识名加载使用: <2>当然,storyBorad中单元格也可以关联一个自定义的类,这个类必须是继承UITableViewCell,这种情况下,直接根据自定义的重用标识名加载使用也是可以的. <3>在xib中创建的单元格,如果直接通过b

NPOI 自定义单元格背景颜色-Excel

2016-12-27 10:44 by 杨新华, 5242 阅读, 0 评论, 收藏, 编辑 NPOI针对office2003使用HSSFWorkbook,对于offce2007及以上使用XSSFWorkbook:今天我以HSSFWorkbook自定义颜色为例说明,Office2007的未研究呢 在NPOI中默认的颜色类是HSSFColor,它内置的颜色有几十种供我们选择,如果不够怎么办,不能修改底层的HSSFColor类: 大概解决思路: 1.将颜色的RGB值添加进调色板HSSFPalette