jquery easyui DataGrid 数据表格 属性

扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults 。

依赖

  • panel
  • resizable
  • linkbutton
  • pagination

用法

1.  <table id="tt"></table>  

 

1.  $('#tt').datagrid({   

2.      url:'datagrid_data.json',   

3.      columns:[[   

4.          {field:'code',title:'Code',width:100},   

5.          {field:'name',title:'Name',width:100},   

6.          {field:'price',title:'Price',width:100,align:'right'}   

7.      ]]   

8.  });  

数据表格(DataGrid)的特性

其特性扩展自 panel,下列是为 datagrid 增加的特性。

名称

类型

说明

默认值

columns

array

datagrid 的 column 的配置对象,更多详细请参见 column 的特性。

null

frozenColumns

array

和列的特性一样,但是这些列将被冻结在左边。

null

fitColumns

boolean

True 就会自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动。

false

striped

boolean

True 就把行条纹化。(即奇偶行使用不同背景色)

false

method

string

请求远程数据的 method 类型。

post

nowrap

boolean

True 就会把数据显示在一行里。

true

idField

string

标识字段。

null

url

string

从远程站点请求数据的 URL。

null

loadMsg

string

当从远程站点加载数据时,显示的提示信息。

Processing, please wait …

pagination

boolean

True 就会在 datagrid 的底部显示分页栏。

false

rownumbers

boolean

True 就会显示行号的列。

false

singleSelect

boolean

True 就会只允许选中一行。

false

pageNumber

number

当设置了 pagination 特性时,初始化页码。

1

pageSize

number

当设置了 pagination 特性时,初始化页码尺寸。

10

pageList

array

当设置了 pagination 特性时,初始化页面尺寸的选择列表。

[10,20,30,40,50]

queryParams

object

当请求远程数据时,发送的额外参数。

{}

sortName

string

定义可以排序的列。

null

sortOrder

string

定义列的排序顺序,只能用 'asc' 或 'desc'。

asc

remoteSort

boolean

定义是否从服务器给数据排序。

true

showFooter

boolean

定义是否显示一行页脚。

false

rowStyler

function

返回例如 'background:red' 的样式,该函数需要两个参数:
rowIndex: 行的索引,从 0 开始。
rowData: 此行相应的记录。

 

loadFilter

function

返回过滤的数据去显示。这个函数需要一个参数 'data' ,表示原始数据。

你可以把原始数据变成标准数据格式,此函数必须返回标准数据对象,含有 'total' 和 'rows' 特性。

 

editors

object

定义编辑行时的 editor 。

预定义的 editor

view

object

定义 datagrid 的 view 。

默认的 view

列(Column)的特性

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

代码示例:

1.  columns:[[   

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

3.      {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},   

4.      {title:'Item Details',colspan:4}   

5.  ],[   

6.      {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},   

7.      {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},   

8.      {field:'attr1',title:'Attribute',width:100},   

9.      {field:'status',title:'Status',width:60}   

10. ]]  

 

名称

类型

说明

默认值

title

string

列的标题文字。

undefined

field

string

列的字段名。

undefined

width

number

列的宽度。

undefined

rowspan

number

指一个单元格占据多少行。

undefined

colspan

number

指一个单元格占据多少列。

undefined

align

string

指如何对齐此列的数据,可以用 'left'、'right'、'center'。

undefined

sortable

boolean

True 就允许此列被排序。

undefined

resizable

boolean

True 就允许此列被调整尺寸。

undefined

hidden

boolean

True 就隐藏此列。

undefined

checkbox

boolean

True 就显示 checkbox。

undefined

formatter

function

单元格的格式化函数,需要三个参数: 
value: 字段的值。
rowData: 行的记录数据。
rowIndex: 行的索引。

undefined

styler

function

单元格的样式函数,返回样式字符串来自定义此单元格的样式,例如 'background:red' 。此函数需要三个参数:
value: 字段的值。
rowData: 行的记录数据。
rowIndex: 行的索引。

undefined

sorter

function

自定义字段的排序函数,需要两个参数:
a: 第一个字段值。
b: 第二个字段值。

undefined

editor

string,object

指编辑类型。当是 string 时指编辑类型,当 object 时包含两个特性: 
type:string,编辑类型,可能的类型是:

 text、textarea、checkbox、numberbox、validatebox、datebox、combobox、combotree。
options:对象,编辑类型对应的编辑器选项。

undefined

编辑器(Editor

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

每个编辑器有下列行为:

名称

参数

说明

init

container, options

初始化编辑器并且返回目标对象。

destroy

target

如果必要就销毁编辑器。

getValue

target

从编辑器的文本返回值。

setValue

target , value

给编辑器设置值。

resize

target , width

如果必要就调整编辑器的尺寸。

例如,文本编辑器(text editor)像下面这样定义:

1.  $.extend($.fn.datagrid.defaults.editors, {   

2.      text: {   

3.          init: function(container, options){   

4.              var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);   

5.              return input;   

6.          },   

7.          getValue: function(target){   

8.              return $(target).val();   

9.          },   

10.         setValue: function(target, value){   

11.             $(target).val(value);   

12.         },   

13.         resize: function(target, width){   

14.             var input = $(target);   

15.             if ($.boxModel == true){   

16.                 input.width(width - (input.outerWidth() - input.width()));   

17.             } else {   

18.                 input.width(width);   

19.             }   

20.         }   

21.     }   

22. });  

数据表格视图(DataGrid View

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

view 是一个对象,它告诉 datagrid 如何呈现行。这个对象必须定义下列方法。

名称

参数

说明

render

target, container, frozen

当数据加载时调用。
target:DOM 对象,datagrid 对象。
container:行的容器。
frozen:表示是否呈现冻结容器。

renderFooter

target, container, frozen

这是呈现行脚选项的函数。

renderRow

target, fields, frozen, rowIndex, rowData

这是选项的函数,将会被 render 函数调用。

refreshRow

target, rowIndex

定义如何刷新指定的行。

onBeforeRender

target, rows

视图被呈现前触发。

onAfterRender

target

视图被呈现后触发。

事件

其事件扩展自 panel,下列是为 datagrid 增加的事件。

名称

参数

说明

onLoadSuccess

data

当数据加载成功时触发。

onLoadError

none

加载远程数据发生某些错误时触发。

onBeforeLoad

param

发送加载数据的请求前触发,如果返回 false加载动作就会取消。

onClickRow

rowIndex, rowData

当用户点击一行时触发,参数包括: 
rowIndex:被点击行的索引,从 0 开始。
rowData:被点击行对应的记录。

onDblClickRow

rowIndex, rowData

当用户双击一行时触发,参数包括: 
rowIndex:被双击行的索引,从 0 开始。
rowData:被双击行对应的记录。

onClickCell

rowIndex, field, value

当用户单击一个单元格时触发。

onDblClickCell

rowIndex, field, value

当用户双击一个单元格时触发。

onSortColumn

sort, order

当用户对一列进行排序时触发,参数包括: 
sort:排序的列的字段名
order:排序的列的顺序

onResizeColumn

field, width

当用户调整列的尺寸时触发。

onSelect

rowIndex, rowData

当用户选中一行时触发,参数包括: 
rowIndex:选中行的索引,从 0 开始
rowData:选中行对应的记录

onUnselect

rowIndex, rowData

当用户取消选择一行时触发,参数包括: 
rowIndex:取消选中行的索引,从 0 开始
rowData:取消选中行对应的记录

onSelectAll

rows

当用户选中全部行时触发。

onUnselectAll

rows

当用户取消选中全部行时触发。

onBeforeEdit

rowIndex, rowData

当用户开始编辑一行时触发,参数包括: 
rowIndex:编辑行的索引,从 0 开始
rowData:编辑行对应的记录

onAfterEdit

rowIndex, rowData, changes

当用户完成编辑一行时触发,参数包括: 
rowIndex:编辑行的索引,从 0 开始
rowData:编辑行对应的记录
changes:更改的字段/值对

onCancelEdit

rowIndex, rowData

当用户取消编辑一行时触发,参数包括: 
rowIndex:编辑行的索引,从 0 开始
rowData:编辑行对应的记录

onHeaderContextMenu

e, field

当 datagrid 的头部被右键单击时触发。

onRowContextMenu

e, rowIndex, rowData

当右键点击行时触发。

方法

名称

参数

说明

options

none

返回 options 对象。

getPager

none

返回 pager 对象。

getPanel

none

返回 panel 对象。

getColumnFields

frozen

返回列的字段,如果 frozen 设定为 true,冻结列的字段被返回。

getColumnOption

field

返回指定列的选项。

resize

param

调整尺寸和布局。

load

param

加载并显示第一页的行,如果指定 param 参数,它将替换 queryParams 特性。

reload

param

重新加载行,就像 load 方法一样,但是保持在当前页。

reloadFooter

footer

重新加载脚部的行。

loading

none

显示正在加载状态。

loaded

none

隐藏正在加载状态。

fitColumns

none

使列自动展开/折叠以适应 datagrid 的宽度。

fixColumnSize

none

固定列的尺寸。

fixRowHeight

index

固定指定行的高度。

loadData

data

加载本地数据,旧的行会被移除。

getData

none

返回加载的数据。

getRows

none

返回当前页的行。

getFooterRows

none

返回脚部的行。

getRowIndex

row

返回指定行的索引,row 参数可以是一个行记录或者一个 id 字段的值。

getSelected

none

返回第一个选中的行或者 null。

getSelections

none

返回所有选中的行,当没有选中的记录时,将返回空数组。

clearSelections

none

清除所有的选择。

selectAll

none

选中当前页所有的行。

unselectAll

none

取消选中当前页所有的行。

selectRow

index

选中一行,行索引从 0 开始。

selectRecord

idValue

通过 id 的值做参数选中一行。

unselectRow

index

取消选中一行。

beginEdit

index

开始对一行进行编辑。

endEdit

index

结束对一行进行编辑。

cancelEdit

index

取消对一行进行编辑。

getEditors

index

获取指定行的编辑器们。每个编辑器有下列特性:
actions:编辑器能做的动作们。
target:目标编辑器的 jQuery 对象。
field:字段名。
type:编辑器的类型。

getEditor

options

获取指定的编辑器, options 参数包含两个特性: 
index:行的索引。
field:字段名。

refreshRow

index

刷新一行。

validateRow

index

验证指定的行,有效时返回 true。

updateRow

param

更新指定的行, param 参数包含下列特性:
index:更新行的索引。
row:行的新数据。

appendRow

row

追加一个新行。

insertRow

param

插入一个新行, param 参数包括下列特性:
index:插入进去的行的索引,如果没有定义,就追加此新行。
row:行的数据。

deleteRow

index

删除一行。

getChanges

type

获取最后一次提交以来更改的行,type 参数表示更改的行的类型,可能的值是:inserted、deleted、updated,等等。

当 type 参数没有分配时,返回所有改变的行。

acceptChanges

none

提交自从被加载以来或最后一次调用acceptChanges以来所有更改的数据。

rejectChanges

none

回滚自从创建以来或最后一次调用acceptChanges以来所有更改的数据。

mergeCells

options

把一些单元格合并为一个单元格,options 参数包括下列特性:
index:列的索引。
field:字段名。
rowspan:合并跨越的行数。
colspan:合并跨越的列数。

showColumn

field

显示指定的列。

hideColumn

field

隐藏指定的列。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/457934.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言笔试题总结

1. 下面这段代码的输出是多少(在32位机上). char *p; // 4 char *q[20]; // 80 char *m[20][20]; // 1600 int (*n)[10]; // 4 struct MyStruct { char dda; double dda1; int type ; }&#xff1b; MyStruct k; // 24 printf("%d %d %d %d",sizeof(p),siz…

第五次作业

学习时间新增代码行博客发表量知识总结 第十周5801HTML5 C和C 一般用于服务端的服务程序开发&#xff0c;硬件编程开发&#xff0c;系统等等大量框架要用到的。JAVA&#xff0c;学好这个可以开发移动设备程序&#xff0c;JSP网页程序。C#&#xff0c;学了这个可以开发Winform&a…

数字信号处理的fpga实现_FPGA数字信号处理:通信类I/Q信号及产生

大侠好&#xff0c;欢迎来到FPGA技术江湖&#xff0c;江湖偌大&#xff0c;相见即是缘分。大侠可以关注FPGA技术江湖&#xff0c;在“闯荡江湖”、"行侠仗义"栏里获取其他感兴趣的资源&#xff0c;或者一起煮酒言欢。大侠好&#xff0c;“宁夏李治廷”再一次和各位见…

iic通讯协议

IIC总线 一般串行数据通讯都有时钟和数据之分,有异步和同步之别. 有单线,双线和三线等. I2C肯定是2线的(不算地线). I2C协议确实很科学,比3/4线的SPI要好,当然线多通讯速率相对就快了. I2C的原则是: 在SCL1(高电平)时,SDA千万别忽悠!!! 否则,SDA下跳则"判罚"为&…

使用 Python 切割图片

刚好我有张 PNG 图片需要均匀切割&#xff0c;刚好我不会 PhotoShop&#xff0c;刚好我想用 Python 来练练手。 于是撸袖子码脚本。 import os from PIL import Imagedef splitimage(src, rownum, colnum, dstpath):img Image.open(src)w, h img.sizeif rownum < h and co…

python数据分析知识点_Python数据分析--Pandas知识点(三)

本文主要是总结学习pandas过程中用到的函数和方法, 在此记录, 防止遗忘. 下面将是在知识点一, 二的基础上继续总结. 前面所介绍的都是以表格的形式中展现数据, 下面将介绍Pandas与Matplotlib配合绘制出折线图, 散点图, 饼图, 柱形图, 直方图等五大基本图形. Matplotlib是python…

SPI通讯协议

SPI&#xff1a;高速同步串行口。是一种标准的四线同步双向串行总线。 SPI&#xff0c;是英语Serial Peripheral interface的缩写&#xff0c;顾名思义就是串行外围设备接口。是Motorola首先在其MC68HCXX系列处理器上定义的。SPI接口主要应用在 EEPROM&#xff0c;FLASH&#x…

基于MVVM的知乎日报应用安卓源码

使用data binding , dagger2 , retrofit2和rxjava实现的&#xff0c;基于MVVM的知乎日报APP运行效果&#xff1a; <ignore_js_op> 使用说明&#xff1a; 项目结构android data binding来实现MVVM。dagger2来完成依赖注入。retrofit2rxjava实现restful的http请求。第三方类…

F#创建者Don Syme谈F#设计原则

在.Net Fringe 2016大会上&#xff0c;F#创建者Don Syme谈了他对F#现状的看法以及F#的二元性。F#是以一个为面向对象语言构建的运行时为基础构建的函数式语言。\\F#是2010年发布的&#xff0c;遵循开源许可协议。F#比.Net更早地踏上了开源之路&#xff0c;C#和.Net在2015年才开…

php签入html出来的影响seo吗_搜索引擎优化_SEO必备6大技能+SEO误区讲解!

大家好&#xff0c;我是逆冬&#xff0c;今天来分享一下实战SEO需要掌握什么样的技能以及SEO知识误区&#xff0c;本篇文章仅代表逆冬本人几年的经验、不见得适合每一个SEOer!下面就让逆冬本人来分析一下实战型SEO到底需要掌握什么技能。第1点&#xff1a;SEO需要不需要熟练掌握…

编写linux驱动程序步骤

一、建立Linux驱动框架&#xff08;装载、卸载Linux驱动&#xff09; Linux内核在使用驱动时首先要装载驱动&#xff0c;在装载过程中进行一些初始化动作&#xff08;建立设备文件、分配内存等&#xff09;&#xff0c;在驱动程序中需提供相应函数来处理驱动初始化工作&#xf…

一种M2M业务的架构及实现M2M业务的方法

http://www.cnblogs.com/coryxie/p/3849764.html 技术领域 [0001] 本发明涉及通信技术领域&#xff0c;尤其涉及一种M2M业务的架构及实现M2M业务的方法。 背景技术 [0002] 随着通信技术的飞速发展以及通信技术与互联网技术的进一步融合&#xff0c;移动业务以及移动互联网技术普…

第二章 mybatis使用注解实现in查询(mysql)

mybatis实现in查询&#xff0c;两种方法&#xff1a; xml形式&#xff08;推荐&#xff09;注解方式&#xff08;个人喜欢注解&#xff0c;但是in场景可能不太适合注解&#xff09;代码&#xff1a; 1 Select("<script>" 2 "SELECT ID…

python面试代码题_python面试基础篇80题

1.为什么学习python?3.Python和Java、PHP、C、C#、C等其他语言的对比&#xff1f; C语言由于其底层操作特性和历史的积累&#xff0c;在嵌入式领域是当之无愧的王者。 PHP跨平台&#xff0c;性能优越&#xff0c;跟linux/unix结合比跟windows结合性能强45%,开发成本低,php5已经…

主设备号与次设备号以及申请

一个字符设备或者块设备都有一个主设备号和次设备号。主设备号和次设备号统称为设备号。主设备号用来表示一个特定的驱动程序。次设备号用来表示使用该驱动程序的各设备。例如一个嵌入式系统&#xff0c;有两个LED指示灯&#xff0c;LED灯需要独立的打开或者关闭。那么&#xf…

javascript 变量作用域

为什么80%的码农都做不了架构师&#xff1f;>>> javascript中的变量的作用域不同于java/c的变量规则。 1、在java/c中&#xff0c;如果有一个全局变量与一个局部变量重名&#xff0c;那么在局部变量的作用域中&#xff0c;局部变量会覆盖掉全局变量的值。当离开局部…

七月算法--12月机器学习在线班-第五次课笔记—回归

七月算法--12月机器学习在线班-第五次课笔记—回归 七月算法&#xff08;julyedu.com&#xff09;12月机器学习在线班学习笔记 http://www.julyedu.com 转载于:https://www.cnblogs.com/sweet-dew/p/5491271.html

集合添加元素python_Python基础:列表、字典、元组、集合、添加和删除元素,增删...

列表&#xff08;有序&#xff09; 添加 list.append(元素)&#xff1a;在列表末尾添加新的元素 list.extend(seq)&#xff1a;在列表末尾一次性追加另一个序列中的多个值 –seq可以是列表、元组、字典&#xff0c;若为字典,则仅会将键(key)作为元素依次添加至原列表的末尾。 l…

file_operations结构体分析 (设备文件的操作)

linux设备驱动中file_operations结构体分析 struct module *owner第一个 file_operations 成员根本不是一个操作; 它是一个指向拥有这个结构的模块的指针. 这个成员用来在它的操作还在被使用时阻止模块被卸载. 几乎所有时间中, 它被简单初始化为 THIS_MODULE, 一个在 <Linux…

公司网络搭建及×××到公司配置

一、公司路由器及子网配置公司192.168.1.0/24子网用于服务器集群&#xff0c;192.168.0.0/24子网用于办公子网&#xff0c;两个子网物理上不在一块。公司开业时&#xff0c;申请了电信40Mbps专线光纤&#xff0c;5个IP地址&#xff0c;网关&#xff1a;*.168.112.9 255.255.25…