云题海 - 专业文章范例文档资料分享平台

当前位置:首页 > jQuery EasyUI API 中文文档- DataGrid数据表格分析

jQuery EasyUI API 中文文档- DataGrid数据表格分析

  • 62 次阅读
  • 3 次下载
  • 2026/4/28 23:09:36

jQuery EasyUI API 中文文档 - DataGrid数据表格

jQuery EasyUI API 中文文档 - DataGrid数据表格使用说明,需要的朋友可以参考下。 扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults 。 依赖 panel resizable linkbutton pagination

用法

复制代码 代码如下:

复制代码 代码如下:

$('#tt').datagrid({

url:'datagrid_data.json', columns:[[

{field:'code',title:'Code',width:100}, {field:'name',title:'Name',width:100},

{field:'price',title:'Price',width:100,align:'right'} ]] });

数据表格(DataGrid)的特性

其特性扩展自 panel,下列是为 datagrid 增加的特性。 名称 columns 类型 array 说明 datagrid 的 column 的配置对象,更多详细请参见 column 的特性。 和列的特性一样,但是这些列将被冻结在左边。 True 就会自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动。 True 就把行条纹化。(即奇偶行使用不同背景色) 请求远程数据的 method 类型。 True 就会把数据显示在一行里。 默认值 null frozenColumns array null fitColumns boolean false striped method nowrap boolean string boolean false post true idField url loadMsg string string string 标识字段。 从远程站点请求数据的 URL。 当从远程站点加载数据时,显示的提示信息。 True 就会在 datagrid 的底部显示分页栏。 True 就会显示行号的列。 True 就会只允许选中一行。 当设置了 pagination 特性时,初始化页码。 当设置了 pagination 特性时,初始化页码尺寸。 当设置了 pagination 特性时,初始化页面尺寸的选择列表。 当请求远程数据时,发送的额外参数。 定义可以排序的列。 定义列的排序顺序,只能用 'asc' 或 'desc'。 定义是否从服务器给数据排序。 定义是否显示一行页脚。 返回例如 'background:red' 的样式,该函数需要两个参数: rowIndex: 行的索引,从 0 开始。 rowData: 此行相应的记录。 返回过滤的数据去显示。这个函数需要一个参数 'data' ,表示原始数据。 你可以把原始数据变成标准数据格式,此函数必须返回标准数据对象,含有 'total' 和 'rows' 特性。 定义编辑行时的 editor 。 定义 datagrid 的 view 。 null null Processing, please wait … false false false 1 pagination rownumbers singleSelect pageNumber boolean boolean boolean number pageSize number 10 pageList queryParams sortName sortOrder remoteSort showFooter array object string string boolean boolean [10,20,30,40,50] {} null asc true false rowStyler function loadFilter function editors view object object 预定义的 editor 默认的 view 列(Column)的特性

DataGrid 的 Column 是一个数组对象,它的每个元素也是一个数组。数组元素的元素是一个配置对象,它定义了每个列的字段。

代码示例:

复制代码 代码如下:

columns:[[

{field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},

{field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true}, {title:'Item Details',colspan:4} ],[

{field:'listprice',title:'List Price',width:80,align:'right',sortable:true}, {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true}, {field:'attr1',title:'Attribute',width:100}, {field:'status',title:'Status',width:60} ]] 名称 title field width rowspan colspan align sortable resizable hidden checkbox 类型 string string number number number string boolean boolean boolean boolean 说明 列的标题文字。 列的字段名。 列的宽度。 指一个单元格占据多少行。 指一个单元格占据多少列。 指如何对齐此列的数据,可以用 'left'、'right'、'center'。 True 就允许此列被排序。 True 就允许此列被调整尺寸。 True 就隐藏此列。 True 就显示 checkbox。 单元格的格式化函数,需要三个参数: value: 字段的值。 rowData: 行的记录数据。 rowIndex: 行的索引。 单元格的样式函数,返回样式字符串来自定义此单元格的样式,例如 'background:red' 。此函数需要三个参数: value: 字段的值。 rowData: 行的记录数据。 rowIndex: 行的索引。 自定义字段的排序函数,需要两个参数: 默认值 undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined formatter function undefined styler function undefined sorter function undefined a: 第一个字段值。 b: 第二个字段值。 指编辑类型。当是 string 时指编辑类型,当 object 时包含两个特性: type:string,编辑类型,可能的类型是: text、textarea、checkbox、numberbox、validatebox、datebox、combobox、combotree。 options:对象,编辑类型对应的编辑器选项。 editor string,object undefined 编辑器(Editor)

用 $.fn.datagrid.defaults.editors 重写了 defaults。

每个编辑器有下列行为: 名称 init destroy getValue setValue resize 参数 container, options target target target , value target , width 说明 初始化编辑器并且返回目标对象。 如果必要就销毁编辑器。 从编辑器的文本返回值。 给编辑器设置值。 如果必要就调整编辑器的尺寸。 例如,文本编辑器(text editor)像下面这样定义: 复制代码 代码如下:

$.extend($.fn.datagrid.defaults.editors, { text: {

init: function(container, options){

var input = $('

getValue: function(target){ return $(target).val(); },

setValue: function(target, value){ $(target).val(value); },

resize: function(target, width){ var input = $(target); if ($.boxModel == true){

input.width(width - (input.outerWidth() - input.width())); } else {

input.width(width);

搜索更多关于: jQuery EasyUI API 中文文档- DataGr 的文档
  • 收藏
  • 违规举报
  • 版权认领
下载文档10.00 元 加入VIP免费下载
推荐下载
本文作者:...

共分享92篇相关文档

文档简介:

jQuery EasyUI API 中文文档 - DataGrid数据表格 jQuery EasyUI API 中文文档 - DataGrid数据表格使用说明,需要的朋友可以参考下。 扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults 。 依赖 panel resizable linkbutton pagination 用法 复制代码 代码如下:

× 游客快捷下载通道(下载后可以自由复制和排版)
单篇付费下载
限时特价:10 元/份 原价:20元
VIP包月下载
特价:29 元/月 原价:99元
低至 0.3 元/份 每月下载150
全站内容免费自由复制
VIP包月下载
特价:29 元/月 原价:99元
低至 0.3 元/份 每月下载150
全站内容免费自由复制
注:下载文档有可能“只有目录或者内容不全”等情况,请下载之前注意辨别,如果您已付费且无法下载或内容有问题,请联系我们协助你处理。
微信:fanwen365 QQ:370150219
Copyright © 云题海 All Rights Reserved. 苏ICP备16052595号-3 网站地图 客服QQ:370150219 邮箱:370150219@qq.com