2024年2月7日发(作者：)

数据表格

继承$.ts，使用$.ts重载默认值。

依赖关系

控制面板



缩放



链接按钮



分页



使用方法

1.

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

2. url:'datagrid_',

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. });

$('#tt').datagrid({url:'datagrid_dcolumns:[[{field:{field:

数据表格属性

属性继承控制面板，以下是数据表格独有的属性。

名称

columns（列）

frozenColumns（固定列）

fitColumns（自适应列宽）

striped（显示条类型

array（数组）

array（数组）

boolean（布尔型）

boolean描述

数据表格列配置对象，查看列属性以获取更多细节。

跟列属性一样，但是这些列固定在左边，不会滚动。

设置为true将自动使列适应表格宽度以防止出现水平滚动。

设置为true将交替显示行背景。

默认值

null

null

false

false

纹） （布尔型）

string（字符串）

boolean（布尔型）

string（字符串）

string（字符串）

string（字符串）

boolean（布尔型）

boolean（布尔型）

boolean（布尔型）

number（数字）

number（数字）

array

object（对象）

string（字符串）

string（字符串）

boolean（布尔型）

boolean请求远程数据的方法类型。

设置为true，当数据长度超出列宽时将会自动截取。

表明该列是一个唯一列。

一个用以从远程站点请求数据的超链接地址。

当从远程站点载入数据时，显示的一条快捷信息。

设置true将在数据表格底部显示分页工具栏。

post

method（方法）

nowrap（截取）

true

idField（id字段）

url（超链接）

loadMsg（载入时信息）

pagination（分页）

null

null

Processing,

please wait …

false

rownumbers（行数）

singleSelect（单选模式）

pageNumber（当前页码）

pageSize（每页记录数）

pageList（可选择的每页记录数）

queryParams（查询参数）

sortName（默认排序）

sortOrder（排序顺序）

remoteSort（远程排序）

showFooter（显示设置为true将显示行数。

false

设置为true将只允许选择一行。

false

当设置分页属性时，初始化分页码。

当设置分页属性时，初始化每页记录数。

当设置分页属性时，初始化每页记录数列表。

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

当数据表格初始化时以哪一列来排序。

定义排序顺序，可以是'asc'或者'desc'（正序或者倒序）。

定义是否通过远程服务器对数据排序。

定义是否显示行底（如果是做统计表格，1

10

[10,20,30,40,50]

{}

null

asc

true

false

行底） （布尔型）

function（函数）

这里可以显示总计等）。

返回样式，如：'background:red'，function有2个参数：

index：行索引，从0开始.

row：对应于该行记录的对象。

返回用以显示的已过滤数据，function有一个参数'data'表示原始数据，你可以将原始数据改变为规范的数据格式，该函数必须返回包含 'total'和'rows'属性的标准数据对象。

定义当编辑一行时的编辑模式。

定义数据表格的视图。

rowStyler（行样式）

loadFilter（载入过滤器）

function（函数）

editors（编辑模式）

view（视图）

列属性

object（对象）

object（对象）

predefined

editors

default view

数据表格的列是一个对象数组，即这个对象中的元素也是一个数组（js中数组是对象）。 对象数组中的每一个元素都是可配置的对象，每个可配置对象定义一个列。

示例代码:

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. ]]

columns:[[{field:'itemid'{field:'product{title:'Item De],[

名称

title（标题）

field（字段）

类型

string（字符串）

string（字符串）

描述

列标题。

列字段。

列宽。

表明一个单元格跨几行。

默认值

undefined

undefined

undefined

undefined

width（宽度） number（数字）

rowspan（跨number（数字）

行数）

colspan（跨列数）

align（对其方式）

sortable（可排序）

resizable（缩放）

hidden（隐藏）

checkbox（复选框）

formatter（格式化）

number（数字）

string（字符串）

boolean（布尔型）

boolean（布尔型）

boolean（布尔型）

boolean（布尔型）

表明一个单元格跨几列。

表明如何对其列数据，可选值：'left'，'right'，'center'。

设置为true允许对该列排序。

设置为true允许该列被缩放。

设置为true将隐藏列。

设置为true将显示复选框。

格式化单元格函数，有3个参数：

value：字段的值。

rowData：行数据。

rowIndex：行索引。

单元格样式函数，返回样式字符串装饰表格如'background:red'，function有3个参数：

value：字段值。

rowData：行数据。

rowIndex：行索引。

T自定义字段排序函数，有2个参数：

a：该列的第一个值。

b：该列的第二个值。

undefined

undefined

undefined

undefined

undefined

undefined

function（函数）

undefined

styler（样式） function（函数）

undefined

sorter（排序器）

function（函数）

undefined

editor（编辑器）

string,object（字符串，对象）

表明编辑类型。如果属性是字符串类型表示编辑类型，如果是对象则包含2个参数：

type：字符串，编辑类型，可选值：text，textarea，undefined

checkbox，numberbox，validatebox，datebox，combobox，combotree。

options：对象，对象于编辑类型的编辑器属性。

编辑器

使用$.s重载默认值。

每个编辑器都有以下方法：

名称

init

destroy

参数

container, options

target

描述

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

销毁编辑器。

getValue

setValue

resize

target

target , value

target , width

获取编辑框的值。

设置编辑框的值。

调整编辑器

例如，如下代码将定义一个文本编辑器：

1. $.extend($.s, {

2. text: {

3. init: function(container, options){

4. var 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. (width - (idth() - ()));

17. } else {

18. (width);

19. }

20. }

21. }

22. });

$.extend($.: {init: f

数据表格视图

使用$.重载默认值。

视图是一个告诉数据表格如何呈现行记录的对象，对象必须定义以下方法：

名称 参数 描述

当数据载入时调用。

target: DOM对象，数据网格对象。

container: 行记录容器。

frozen: 是否呈现固定容器。

render target, container, frozen

renderFooter

renderRow

refreshRow

onBeforeRender

onAfterRender

事件

target, container, frozen

target, fields, frozen, rowIndex,

rowData

target, rowIndex

target, rows

target

这是一个可选函数用以展现行底。

这是一个可选函数，它可以被render函数调用。

定义如何刷新指定的行。

在视图被呈现之前触发。

在视图被程序之后触发。

事件继承控制面板，以下是数据表格独有的属性。

名称

onLoadSuccess

onLoadError

onBeforeLoad

参数

data

none

param

描述

当数据载入成功时触发。

当载入远程数据发生错误时触发。

在请求载入数据之前触发，如果返回false将取消载入。

当用户点击行时触发，参数如下：

rowIndex：被点击的行索引，从0开始。

rowData：对应于被点击的行的记录。

当用户双击一行时触发，参数如下：

rowIndex：被点击的行索引，从0开始。

rowData：对应于被点击的行的记录。

当用户点击单元格时触发。

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

当用户对列排序时触发，参数如下：

sort：排序字段名称。

order：排序顺序。

当用户调整列宽时触发。

当用户选择一行是触发，参数如下：

rowIndex：被选择的行索引，从0开始。

rowData：对应于被选择行的记录。

当用户取消选择一行时触发，参数如下：

rowIndex：被取消选择的行索引，从0开始。

rowData：对应于被取消选择行的记录。

当用户选择所有行时触发。

当用户取消选择所有行时触发。

当用户开始编辑一行时触发，参数如下：

rowIndex：正在编辑的行索引，从0开始。

onClickRow rowIndex, rowData

onDblClickRow

onClickCell

onDblClickCell

onSortColumn

onResizeColumn

onSelect

rowIndex, rowData

rowIndex, field, value

rowIndex, field, value

sort, order

field, width

rowIndex, rowData

onUnselect

onSelectAll

onUnselectAll

onBeforeEdit

rowIndex, rowData

rows

rows

rowIndex, rowData

rowData：对应于正在编辑的行的记录。

当用户编辑完成时触发，参数如下：

rowIndex：正在编辑的行索引，从0开始。

rowData：对应于正在编辑的行的记录。

changes：被改变的字段内容，对应方式为字段：值。

当用户取消编辑行时触发，参数如下：

rowIndex：正在编辑的行索引，从0开始。

rowData：对应于正在编辑的行的记录。

当数据表格的列标题被鼠标右键单击时触发。

当一行被鼠标右键单击时触发。

onAfterEdit

rowIndex, rowData,

changes

onCancelEdit rowIndex, rowData

onHeaderContextMenu

onRowContextMenu

方法

名称

options

getPager

getPanel

getColumnFields

getColumnOption

resize

load

reload

reloadFooter

loading

loaded

fitColumns

fixColumnSize

fixRowHeight

loadData

getData

getRows

参数

none

none

none

frozen

field

param

param

param

footer

none

none

none

none

index

data

none

none

e, field

e, rowIndex, rowData

描述

返回属性对象。

返回页面对象。

返回控制面板对象。

返回列字段，如果设置了frozen属性为true，将返回固定列的字段名。

返回特定的列属性。

缩放和布局。

载入并显示第一页的记录，如果传递了'param'参数，它将会覆盖查询参数属性的值。

重载记录，跟'load'方法一样但是重载的是当前页的记录而非第一页。

重载行底记录。

显示载入状态。

隐藏载入状态。

让列宽自动适应数据表格的宽度。

固定列尺寸。

固定特定列的高度。

载入本地数据，旧记录将被移除。

返回已载入数据。

返回当前页的记录。

getFooterRows

getRowIndex

getSelected

getSelections

clearSelections

selectAll

unselectAll

selectRow

selectRecord

unselectRow

beginEdit

endEdit

cancelEdit

none

row

none

none

none

none

none

index

idValue

index

index

index

index

返回行底记录。

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

返回第一个被选择的行记录或null。

返回所有被选择的行，当没有记录被选择时，将返回一个空数组。

取消所有的已选择项。

全选。

取消全选。

选择一行，行索引从0开始。

通过传递id参数来选择一行。

取消选择一行。

开始编辑一行。

结束编辑。

取消编辑。

获取指定行的编辑器，每个编辑器有如下属性：

actions：编辑器可以做的行为。

target：目标编辑器jQuery对象。

field：字段名。

type：编辑器类型。

获取特定的编辑器，options参数有2个属性：

index：行索引。

field:字段名。

刷新一行。

校验指定的行，如果有效返回true。

更新指定的行，param参数包含如下属性：

index：要更新的行索引。

row：新的行数据。

添加一行。

插入一个新行，param参数包含如下属性：

index：要插入的行索引，如果没有定义则在最后面添加一个新行。

row：行数据。

删除一行。

获取从最后一次提交开始的被修改的所有行，type参数表明修改的类型，可选值：inserted，deleted，updated等 。当没有传递type参数时，返回所有被修改的行。

getEditors index

getEditor

refreshRow

validateRow

updateRow

appendRow

insertRow

deleteRow

getChanges

options

index

index

param

row

param

index

type

acceptChanges

rejectChanges

none

none

提交所有修改的数据，提交后的数据将不能再修改或者回滚。

回滚所有被删除的行。

合并单元格，options参数包含如下属性：

index：行索引。

field：字段名。

rowspan：整合单元格要跨的行数。

colspan：整合单元格要跨的列数。

显示特定的列。

隐藏特定的列。

mergeCells options

showColumn

hideColumn

field

field