`
nikofan
  • 浏览: 226443 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类

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 = '[url=javascript:edit(\'' + record.id + '\')]Edit[/url]  '
                    + '[url=javascript:del(\'' + record.id + '\')]Delete[/url]'
    }

    //将性别文本替换成图片
    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";
    }
});

0
0
分享到:
评论

相关推荐

    jquery miniui 教程 表格控件 合并单元格应用

    本文主要讲述的是在jQuery miniUI中如何应用表格控件来合并单元格。 合并单元格是表格布局中常用的一个功能,它可以将多个相邻的单元格合并为一个单元格,这样可以使表格的布局更加符合特定的展示需求,比如在一个...

    JQUERY MINIUI 学习资料

    5. **主题定制**:MiniUI 提供了多种预设主题,并且支持自定义,开发者可以根据项目需求调整界面风格。 6. **文档与示例**:jQuery MiniUI 提供详尽的使用手册和丰富的示例,帮助开发者快速上手和解决问题。 **...

    jQuery MiniUI 2.1.5 官方版本,作个保留

    jQuery MiniUI - 快速开发WebUI。 它能缩短开发时间,减少代码量,使开发者更专注于业务和服务端,轻松实现界面开发,带来绝佳的用户体验。 使用MiniUI,开发者可以快速创建Ajax无刷新、B/S快速录入数据、CRUD、...

    jQuery MiniUI-jar 包

    1. **组件丰富**:MiniUI包含了大量的UI组件,如表格(Grid)、树(Tree)、下拉选择框(ComboBox)、日期选择器(DatePicker)等,这些组件都进行了充分的封装,使得开发过程更为简洁。 2. **响应式设计**:框架...

    jQuery miniui_php

    jQuery miniUI 是一个基于 jQuery 的轻量级前端开发框架,专为 PHP 开发者设计,提供了一系列强大的组件,如表格、表单、按钮、对话框等,帮助开发者快速构建用户界面。它简化了网页交互,提高了开发效率,并且具有...

    jquery表格控件

    在Web开发领域,jQuery表格控件作为一款功能强大的工具,深受开发者喜爱。其丰富的特性、高效的性能以及易于使用的API,使其成为实现数据展示、操作和管理的理想选择。本文将深入探讨jQuery表格控件的核心特性,并...

    asp.net处理不规则表格 结合jquery处理不规则表格

    在ASP.NET开发中,我们经常会遇到需要处理不规则表格的情况,这些表格可能具有不同数量的行、列或者具有动态变化的结构。在这种情况下,结合jQuery的强大学习库,我们可以有效地管理和操作这些复杂的表格数据。以下...

    spreadjs_自定义单元格实现层级树-demo.zip

    《SpreadJS:自定义单元格实现层级树结构详解》 SpreadJS是一款强大的JavaScript电子表格库,它提供了丰富的功能,使得开发者能够轻松地在Web应用中实现类似Excel的表格操作。在"spreadjs_自定义单元格实现层级树-...

    jquery插件,基于jquery的表格控件无刷新实现添加编辑删除统计功能

    《基于jQuery的无刷新表格控件开发详解》 在现代Web开发中,高效的数据展示和交互是提升用户体验的关键。jQuery作为一个轻量级的JavaScript库,因其简洁的API和丰富的插件生态,常被用于实现复杂的功能,如动态表格...

    miniui_java_myeclipse.rar_jQuery miniUI_java miniui_miniui

    5. 图标和其他资源:MiniUI 可能附带了用于组件的图标和其他图形资源。 使用 MiniUI 可以极大地提高 Java Web 开发的生产力,提供高质量的用户界面。通过与 MyEclipse 的整合,开发者可以在熟悉的开发环境中享受到 ...

    jQuery AJAX表格控件源码

    在网页开发中,数据展示和交互是不可或缺的部分,jQuery AJAX表格控件就是一种高效、动态的数据呈现方式。它利用jQuery库的强大功能,结合AJAX技术,实现在不刷新整个页面的情况下进行数据的加载、编辑和删除,提升...

    基于jQuery的合并表格中相同文本的相邻单元格的代码

    【jQuery合并表格中相同文本的相邻单元格】 在网页开发中,经常需要处理表格数据,尤其是在展示大量重复信息时,为了提高数据可读性,通常会采用合并相同内容的单元格来减少冗余。jQuery是一个强大的JavaScript库,...

    jquery miniui

    1. **jQuery 基础**:MiniUI 是基于 jQuery 构建的,因此熟悉 jQuery 的选择器、事件处理和 DOM 操作至关重要。 2. **HTML & CSS**:理解基本的 HTML 结构和 CSS 样式,以便正确地布局和美化 MiniUI 组件。 3. **...

    jQuery MiniUI

    1. **控件丰富**:MiniUI 包含了一系列常见的Web UI组件,如表格(Grid)、下拉选择框(ComboBox)、日期选择器(DatePicker)、对话框(Dialog)、分页(Pager)、表单(Form)等,这些控件设计精良,易于集成,...

    jquery miniui 3.0

    1. **组件丰富**:MiniUI 提供了诸如表格(Grid)、表单(Form)、按钮(Button)、对话框(Dialog)、下拉菜单(ComboBox)、树形控件(Tree)等常见 Web UI 组件,覆盖了日常开发中的大部分需求。 2. **数据绑定*...

    jquery jquery控件 时间控件 时分秒控件

    在本文中,我们将深入探讨jQuery时间控件,特别是那些能够显示和选择时、分、秒的控件。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。时间控件在Web应用中非常常见,...

    jquery插件--表格分页

    三、使用jQuery实现表格分页 1. 引入jQuery和分页插件:首先需要在HTML文件中引入jQuery库和选择的分页插件CSS/JS文件。 2. 初始化表格:使用jQuery选择器找到需要分页的表格,并进行初始化,设置分页参数,如每页...

    jquery table rowspan 表格单元格合并Demo.zip

    在这个“jquery table rowspan 表格单元格合并Demo.zip”中,我们主要关注的是如何使用 jQuery 来实现 HTML 表格(`&lt;table&gt;`)中的 `rowspan` 属性来合并单元格,以创建更复杂、更有结构感的表格布局。 首先,`...

    基于jQuery实现的自定义下拉框控件

    **基于jQuery实现的自定义下拉框控件** 在网页开发中,下拉框(Dropdown)是一种常见的用户界面元素,用于提供多个可选项供用户选择。然而,HTML原生的`&lt;select&gt;`标签功能有限,样式调整不便,无法满足一些高级交互...

Global site tag (gtag.js) - Google Analytics