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

jQuery MiniUI 开发教程 表格控件 表格:自定义列(二)

阅读更多
表格:自定义列


参考示例:数据表格    分页表格

表格列配置集合( columns ),是一个数组,如:[column, column, ...]。
其中一个column的配置参数如下表:
Name Type Description Default
header String 表头列文本
field String 单元格值字段
name String 列标识名称
width Number 列宽度
headerAlign String 表头列文本位置。left/center/right。 left
align String 单元格文本位置。left/center/right。 left
headerCls String 表头列样式类。
cellCls String 单元格样式类
headerStyle String 表头列样式
cellStyle String 单元格样式
editor Object 单元格编辑器。
renderer Function 单元格绘制处理函数,同drawcell事件。
allowMove Boolean 是否可移动表头列。 true
allowResize Boolean 是否拖拽调节表头列宽度。 true

使用HTML配置方式,代码如下
<div id="datagrid1" class="mini-datagrid" style="width:700px;height:280px;"
    url="../data/DataService.aspx?method=SearchEmployees"  idField="id" allowResize="true">
    <div property="columns">
        <div type="indexcolumn" ></div>
        <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>   
        <div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>                           
        <div field="gender" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">性别</div>
        <div field="salary" width="100" allowSort="true">薪资</div>                                   
        <div field="age" width="100" allowSort="true">年龄</div>
        <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>               
    </div>
</div>  

我们也可以使用Javascript方式,代码如下:

var grid = new mini.DataGrid();
grid.set({
    url: "../data/DataService.aspx?method=SearchEmployees",
    style: "width:700px;height:280px;",
    columns: [
        { type: "indexcolumn" },
        { header: "员工帐号", field: "loginname", width: 120, headerAlign: "center", allowSort: true },
        { header: "姓名", field: "name", width: 120, headerAlign: "center", allowSort: true },
        { header: "性别", field: "gender", width: 100, align: "center", renderer: onGenderRenderer },
        { header: "薪资", field: "salary", width: 100, allowSort: true },
        { header: "年龄", field: "age", width: 100, allowSort: true },
        { header: "创建日期", field: "createtime", width: 100, headerAlign: "center", allowSort: true, dateFormat: "yyyy-MM-dd" }
    ]
});
grid.render(document.body);

Note:无论是使用Javascript还是HTML的方式创建表格,实现功能都是一样的。
0
0
分享到:
评论

相关推荐

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

    jQuery miniUI 是一款基于jQuery开发的轻量级Web UI组件库,它提供了丰富的控件,使得开发人员可以快速地构建出具有专业外观的Web应用程序。本文主要讲述的是在jQuery miniUI中如何应用表格控件来合并单元格。 合并...

    JQUERY MINIUI 学习资料

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

    jQuery MiniUI-jar 包

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

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

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

    jquery表格控件

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

    jQuery miniui_php

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

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

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

    jQuery AJAX表格控件源码

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

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

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

    jquery miniui

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

    jquery miniui 3.0

    4. **强大的表格组件**:MiniUI 的表格组件支持分页、排序、过滤、编辑等功能,可以方便地处理大量数据,并提供了多种自定义列模板,满足各种展示需求。 5. **易于定制和扩展**:MiniUI 的代码结构清晰,开发者可以...

    miniui_java_myeclipse.rar_jQuery miniUI_java miniui_miniui

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

    jQuery MiniUI

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

    JQ插件第五十二:自定义上传HTML控件

    在IT领域,尤其是在Web开发中,自定义上传控件是一个常见的需求,特别是在处理用户需要上传图片或文件的场景。"JQ插件第五十二:自定义上传HTML控件"就是一个针对这种需求的解决方案,它利用jQuery库来创建一个美观...

    jquery插件--表格分页

    二、jQuery表格分页插件 jQuery有多个插件用于实现表格分页,例如: 1. jQuery DataTables:这是一个强大的数据表插件,它提供了分页、排序、搜索和过滤等功能。DataTables支持自定义分页样式,同时提供了多种数据...

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

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

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

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

    jQuery Datatable 自定义列1

    jQuery Datatable 自定义列1 jQuery Datatable 是一个功能强大的表格工具,提供了许多实用的功能,例如排序、分页、查找等。在本文中,我们将重点讲解如何对 Datatable 中的表格内容进行操作,包括改变样式、增加一...

Global site tag (gtag.js) - Google Analytics