nikofan 发表于 2013-1-22 21:50:53

jQuery MiniUI 开发教程 表格控件 表格:自定义单元格(三)

表格:自定义单元格
http://www.miniui.com/docs/api/images/drawcell.gif
参考示例:自定义单元格

监听处理"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;
            if (edu.id == value) {
                e.cellHtml = edu.name;
                break;
            }
      }
    }

    //action列,超连接操作按钮
    if (column.name == "action") {
      e.cellStyle = "text-align:center";
      e.cellHtml = 'Edit'
                  + 'Delete'
    }

    //将性别文本替换成图片
    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";
    }
});
页: [1]
查看完整版本: jQuery MiniUI 开发教程 表格控件 表格:自定义单元格(三)