作者博客

数据表格和树形菜单[Data and Tree]

数据表格[datagrid]

继承$.fn.panel.defaults，使用$.fn.datagrid.defaults重载默认值。

示例一 示例二 示例三 示例四 示例五

依赖关系

使用方法：

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


$('#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'}
    ]]
});

属性：

数据表格属性

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

名称 类型 描述 默认值
columns（列） array（数组） 数据表格列配置对象，查看列属性以获取更多细节。 null
frozenColumns（固定列） array（数组） 跟列属性一样，但是这些列固定在左边，不会滚动。 null
fitColumns（自适应列宽） boolean（布尔型） 设置为true将自动使列适应表格宽度以防止出现水平滚动。 false
striped（显示条纹） boolean（布尔型） 设置为true将交替显示行背景。 false
method（方法） string（字符串） 请求远程数据的方法类型。 post
nowrap（截取） boolean（布尔型） 设置为true，当数据长度超出列宽时将会自动截取。 true
idField（id字段） string（字符串） 表明该列是一个唯一列。 null
url（超链接） string（字符串） 一个用以从远程站点请求数据的超链接地址。 null
loadMsg（载入时信息） string（字符串） 当从远程站点载入数据时，显示的一条快捷信息。 Processing, please wait …
pagination（分页） boolean（布尔型） 设置true将在数据表格底部显示分页工具栏。 false
rownumbers（行数） boolean（布尔型） 设置为true将显示行数。 false
singleSelect（单选模式） boolean（布尔型） 设置为true将只允许选择一行。 false
checkOnSelect boolean（布尔型） 如果设置为 true，当用户点击一行的时候 checkbox checked(选择)/unchecked(取消选择)。 如果为false，当用户点击刚好在checkbox的时候，checkbox checked(选择)/unchecked(取消选择)。这个属性从1.3版本以后可用。 true
selectOnCheck boolean（布尔型） 如果设置为true，点击checkbox将永远选择这行。如果设置为false，选择一个行将不会选择checkbox。这个属性从1.3版本以后可用。 true
pagePosition string（文本型） 定义分页工具栏的位置.可用值有： 'top'，'bottom'，'both'。这个属性从1.3版本以后可用。 bottom
checkOnSelect boolean（布尔型） 如果设置为true，点击checkbox将永远选择这行。如果设置为false，选择一个行将不会选择checkbox。这个属性从1.3版本以后可用。 false
pageNumber（当前页码） number（数字） 当设置分页属性时，初始化分页码。 1
pageSize（每页记录数） number（数字） 当设置分页属性时，初始化每页记录数。 10
pageList（可选择的每页记录数） array 当设置分页属性时，初始化每页记录数列表。 [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'，function有2个参数：
index：行索引，从0开始.
row：对应于该行记录的对象。
loadFilter（载入过滤器） function（函数） 返回用以显示的已过滤数据，function有一个参数'data'表示原始数据，你可以将原始数据改变为规范的数据格式，该函数必须返回包含 'total'和'rows'属性的标准数据对象。
editors（编辑模式） object（对象） 定义当编辑一行时的编辑模式。 predefined editors
view（视图） object（对象） 定义数据表格的视图。 default view
列属性：

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

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（标题） 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将显示复选框。 undefined
formatter（格式化） function（函数） 格式化单元格函数，有3个参数：
value：字段的值。
rowData：行数据。
rowIndex：行索引。 		undefined
styler（样式） function（函数） 单元格样式函数，返回样式字符串装饰表格如'background:red'，function有3个参数：
value：字段值。
rowData：行数据。
rowIndex：行索引。 		undefined
sorter（排序器） function（函数） T自定义字段排序函数，有2个参数：
a：该列的第一个值。
b：该列的第二个值。 		undefined
editor（编辑器） string,object（字符串，对象） 表明编辑类型。如果属性是字符串类型表示编辑类型，如果是对象则包含2个参数：
type：字符串，编辑类型，可选值：text，textarea，checkbox，numberbox，validatebox，datebox，combobox，combotree。
options：对象，对象于编辑类型的编辑器属性。 		undefined
编辑器

使用$.fn.datagrid.defaults.editors重载默认值。

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

名称 参数 描述
init container, options 初始化编辑器并返回目标对象。
destroy target 销毁编辑器。
getValue target 获取编辑框的值。
setValue target , value 设置编辑框的值。
resize target , width 调整编辑器

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

$.extend($.fn.datagrid.defaults.editors, {
    text: {
        init: function(container, options){
            var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
            return 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);
            }
        }
    }
});

事件：

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

名称 参数 描述
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 rowIndex,rowData 当用户选中一行的时候触发,参数包含：
rowIndex：选中行下标, 起始值 0
rowData：这个记录代表的是选中行的数据
这个事件从1.3版本以后可用。
onUncheck rowIndex,rowData 当用户取消选中一行的时候触发, 参数包含：
rowIndex： 取消选中行下标，起始值0
rowData： 这个记录代表的是取消选中行的数据
这个事件从1.3版本以后可用。
onCheckAll rows 当用户选中所有行时触发。这个事件从1.3版本以后可用。
onUncheckAll rows 当用户取消选中所有行时触发。这个事件从1.3版本以后可用。
checkRow index 选中一行，行的下标的起始值是0。这个事件从1.3版本以后可用。
uncheckRow index 取消选择一行，行的下标起始值0。这个事件从1.3版本以后可用。
onCheck rows 当用户取消选择所有行时触发。
onBeforeEdit rowIndex, rowData 当用户开始编辑一行时触发，参数如下：
rowIndex：正在编辑的行索引，从0开始。
rowData：对应于正在编辑的行的记录。
onAfterEdit rowIndex, rowData, changes 当用户编辑完成时触发，参数如下：
rowIndex：正在编辑的行索引，从0开始。
rowData：对应于正在编辑的行的记录。
changes：被改变的字段内容，对应方式为字段：值。
onCancelEdit rowIndex, rowData 当用户取消编辑行时触发，参数如下：
rowIndex：正在编辑的行索引，从0开始。
rowData：对应于正在编辑的行的记录。
onHeaderContextMenu e, field 当数据表格的列标题被鼠标右键单击时触发。
onRowContextMenu e, rowIndex, rowData 当一行被鼠标右键单击时触发。

方法：

名称 参数 描述
options none 返回属性对象。
getPager none 返回页面对象。
getPanel none 返回控制面板对象。
getColumnFields frozen 返回列字段，如果设置了frozen属性为true，将返回固定列的字段名。
getColumnOption field 返回特定的列属性。
resize param 缩放和布局。
load param 载入并显示第一页的记录，如果传递了'param'参数，它将会覆盖查询参数属性的值。
reload param 重载记录，跟'load'方法一样但是重载的是当前页的记录而非第一页。
reloadFooter footer 重载行底记录。
loading none 显示载入状态。
loaded none 隐藏载入状态。
fitColumns none 让列宽自动适应数据表格的宽度。
fixColumnSize none 固定列尺寸。
fixRowHeight index 固定特定列的高度。
autoSizeColumn field 允许用户调整列宽以适合内容。这个方法从1.3版本以后可用。
loadData data 载入本地数据，旧记录将被移除。
getData none 返回已载入数据。
getRows none 返回当前页的记录。
getFooterRows none 返回行底记录。
getRowIndex row 返回指定行的索引，row参数可以是行记录或者是一个id字段的值。
getChecked none 返回checkbox被选中的所有行数据。这个方法从1.3版本以后可用。
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参数有2个属性：
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 提交所有修改的数据，提交后的数据将不能再修改或者回滚。
rejectChanges none 回滚所有被删除的行。
mergeCells options 合并单元格，options参数包含如下属性：
index：行索引。
field：字段名。
rowspan：整合单元格要跨的行数。
colspan：整合单元格要跨的列数。
showColumn field 显示特定的列。
hideColumn field 隐藏特定的列。

属性表格[propertygrid]

继承$.fn.datagrid.defaults，使用$.fn.propertygrid.defaults重载默认值。

依赖关系

使用方法：

<table id="pg"></table>


$('#pg').propertygrid({
    url:'propertygrid_data.json',
    showGroup:true
});

属性：

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

名称 类型 描述 默认值
showGroup（显示分组） boolean（布尔型） 定义是否显示属性分组。 false
groupField（分组字段） string（字符串） 定义要分组的字段名称。 group
groupFormatter（分组格式） function（函数） 定义如何格式化分组中的值。

树形菜单[tree]

使用$.fn.tree.defaults重载默认值。

示例一 示例二

依赖关系

使用方法：

树形菜单可以用<ul>标签定义，它可以定义叶子节点和子节点，代码示例如下：

<ul id="tt">
    <li>
        <span>Folder</span>
        <ul>
            <li>
                <span>Sub Folder 1</span>
                <ul>
                    <li>
                        <span><a href="#">File 11</a></span>
                    </li>
                    <li>
                        <span>File 12</span>
                    </li>
                    <li>
                        <span>File 13</span>
                    </li>
                </ul>
            </li>
            <li>
                <span>File 2</span>
            </li>
            <li>
                <span>File 3</span>
            </li>
        </ul>
    </li>
    <li>
        <span>File21</span>
    </li>
</ul>

也可以用不带<li>的<ul>标签来定义：

<ul id="tt"></ul>


$('#tt').tree({
    url:'tree_data.json'
});

树形菜单的数据格式：

每个节点都拥有以下属性：

  • id：节点id，对载入远程数据很重要。
  • text：显示在节点的文本。
  • state：节点状态，'open' or 'closed'，默认为'open'。当设置为'closed'时，拥有子节点的节点将会从远程站点载入它们。
  • checked：表明节点是否被选择。
  • attributes：可以为节点添加的自定义属性。
  • children：子节点，必须用数组定义。

示例代码：

[{
    "id":1,
    "text":"Folder1",
    "iconCls":"icon-save",
    "children":[{
        "text":"File1",
        "checked":true
    },{
        "text":"Books",
        "state":"open",
        "attributes":{
            "url":"/demo/book/abc",
            "price":100
        },
        "children":[{
            "text":"PhotoShop",
            "checked":true
        },{
            "id": 8,
            "text":"Sub Bookds",
            "state":"closed"
        }]
    }]
},{
    "text":"Languages",
    "state":"closed",
    "children":[{
        "text":"Java"
    },{
        "text":"C#"
    }]
}]

属性：

名称 类型 描述 默认值
url（超链接） string（字符串） 用以载入远程数据的超链接地址。 null
method（方法） string（字符串） 获取数据的HTTP方法。 post
animate（动画） boolean（布尔型） 定义当节点打开或关闭时是否显示动画效果。 false
checkbox（复选框） boolean（布尔型） 定义是否在每个节点之前显示复选框。 false
cascadeCheck（级联选择） boolean（布尔型） 定义是否支持级联选择。 true
onlyLeafCheck（只选叶子节点） boolean（布尔型） 定义是否只在叶子节点之前显示复选框。 false
dnd（拖放） boolean（布尔型） 定义是否支持拖放。 false
data（数据） array（数组） 将被载入的节点数据。 null

事件：

多数事件回调函数都有'node'参数，该参数包含如下属性：

  • id：节点的唯一标识。
  • text：显示在节点上的文本。
  • checked：节点是否被选择。
  • attributes：节点的自定义属性。
  • target：目标DOM对象。
名称 参数 描述
onClick node 当用户点击节点时触发，node参数包含如下属性：
id：节点id。
text：显示在节点上的文本。
checked：节点是否被选择。
attributes：节点的自定义属性。
target：被点击的目标DOM对象。
onDblClick node 当用户双击节点时触发。
onBeforeLoad node, param 在请求载入数据之前触发，返回false将取消载入。
onLoadSuccess node, data 当数据载入成功时触发。
onLoadError arguments 当数据载入失败时触发，arguments参数跟jQuery.ajax的'error'函数一样。
onBeforeExpand node 在节点打开之前触发，返回false将取消打开。
onExpand node 在节点被打开时触发。
onBeforeCollapse node 在节点被关闭之前触发，返回false将取消关闭。
onCollapse node 当节点被关闭时触发。
onCheck node, checked 当用户点击复选框时触发。
onBeforeSelect node 在节点被选择之前触发，返回false将取消选择。
onSelect node 当节点被选择时触发。
onContextMenu e, node 当节点被鼠标右键点击时触发。
onDrop target, source, point 当节点位置被（拖动）更换时触发。
target：DOM对象，需要被拖动动的目标节点。
source：原始节点。
point：指明拖动方式，可选值：'append'，'top'或者'bottom'。
onBeforeEdit node 在编辑节点之前触发。
onAfterEdit node 在编辑节点之后触发。
onCancelEdit node 当取消编辑时触发。

方法：

名称 参数 描述
options none 返回树形菜单属性对象。
loadData data 载入树形菜单数据。
getNode target 获取特定的节点对象。
getData target 获取特定的节点数据，包括它的子节点。
reload target 重新载入树形菜单数据。
getRoot none 获取根节点，返回节点对象。
getRoots none 获取根节点，返回节点数组。
getParent target 获取父节点，target是一个节点DOM对象。
getChildren target 获取子节点，target参数是一个节点DOM对象。
getChecked none 获取所有被选择的节点。
getSelected none 获取被选择的节点并返回，如果没有节点被选择则返回null。
isLeaf target 判断指定的节点是否是叶子节点，target参数是一个节点DOM对象。
find id 查找指定的节点并返回节点对象。
select target 选择一个节点，target参数是一个节点DOM对象。
check target 设置指定的节点为已选择状态。
uncheck target 设置指定的节点为未选择状态。<
collapse target 关闭节点，target参数是一个节点DOM对象。
expand target 打开节点，target参数是一个节点DOM对象。
collapseAll target 关闭所有的节点。
expandAll target 打开所有的节点。
expandTo target 打开从根节点到指定节点之间的所有节点。
append param 添加若干子节点到一个父节点，param参数有2个属性：
parent：DOM对象，将要被添加子节点的父节点，如果未指定，子节点将被添加至根节点。
data：数组，节点数据。
toggle target 打开或关闭节点的触发器，target参数是一个节点DOM对象。
insert param 在一个指定节点之前或之后插入节点，'param'参数包含如下属性：
before：DOM对象，在某个节点之前插入。
after: DOM对象，在某个节点之后插入。
data：对象，节点数据。
remove target 移除一个节点和它的子节点，target参数是一个节点DOM对象。
pop target 移除一个节点和它的子节点，该方法跟remove方法一样，不同的是它将返回被移除的节点数据。
update param 更新指定的节点，param参数有如下属性：
target(DOM对象，将被更新的目标节点)，id，text，iconCls，checked等。
enableDnd none 启用拖动特性。
disableDnd none 禁用拖动特性。
beginEdit nodeEl 开始编辑节点。
endEdit nodeEl 结束编辑节点。
cancelEdit nodeEl 取消编辑节点。

树形表格[treegrid]

继承$.fn.datagrid.defaults，使用$.fn.treegrid.defaults重载默认值。

示例一 示例二

依赖关系

使用方法：

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


$('#tt').treegrid({
    url:'treegrid_data.json',
    treeField:'name',
    columns:[[
        {title:'Task Name',field:'name',width:180},
        {field:'persons',title:'Persons',width:60,align:'right'},
        {field:'begin',title:'Begin Date',width:80},
        {field:'end',title:'End Date',width:80}
    ]]
});

属性：

属性继承数据表格，以下是树形表格独有的树形。

名称 类型 描述 默认值
treeField（树形字段） string（字符串） 定义作为树节点的字段。 null
animate（动画） boolean（布尔型） 定义当打开或关闭节点时是否显示动画效果。 false

事件：

事件继承数据表格，以下是树形表格的独有事件。

名称 参数 描述
onClickRow row 当用户点击节点时触发 。
onDblClickRow row 当用户双击节点时触发 。
onBeforeLoad row, param 在请求载入数据之前触发，返回false将取消载入。
onLoadSuccess row, data 当数据载入成功时触发。
onLoadError arguments 当数据载入失败时触发，arguments参数和jQuery.ajax的'error'函数一样。
onBeforeExpand row 在节点打开之前触发 ，返回false将取消打开。
onExpand row 当节点打开时触发。
onBeforeCollapse row 在节点关闭之前触发，返回false将取消关闭。
onCollapse row 当节点关闭时触发。
onContextMenu e, row 当节点被鼠标右键点击时触发 。
onBeforeEdit row 当用户开始编辑节点时触发。
onAfterEdit row,changes 当用户结束编辑时触发。
onCancelEdit row 当用户取消编辑节点时触发。

方法：

名称 参数 描述
options none 返回树形表格的属性对象。
resize options 设置树形表格的大小，options包含2个属性：
width：新的树形表格宽度
height：新的树形表格高度。
fixRowHeight id 固定特定行的高。
loadData data 载入树形表格数据。
reload id 重新载入树形表格数据。
reloadFooter footer 重新载入树形表格的行底数据。
getData none 获取已载入的数据。
getFooterRows none 获取行底数据。
getRoot none 获取根节点，返回节点对象。
getRoots none 获取根节点，返回节点数组。
getParent id 获取父节点。
getChildren id 获取子节点。
getSelected none 获取被选择节点并返回，如果没有节点被选择则返回null。
getSelections none 获取所有被选择的节点。
getLevel id 获取指定的节点的层级。
find id 查找指定的节点并返回节点数据。
select id 选择一个节点。
unselect id 取消选择一个节点。
selectAll none 选择所有的节点。
unselectAll none 取消选择所有的节点。
collapse id 关闭节点。
expand id 打开节点。
collapseAll id 关闭所有节点。
expandAll id 打开所有节点。
expandTo id 打开从根节点到指定节点直接的所有节点。
toggle id 打开或关闭节点的触发器。
append param 添加若干子节点到一个父节点，'param'参数包含如下属性：
parent：DOM对象，将要被添加子节点的父节点，如果未指定，子节点将被添加至根节点。
data：数组，节点数据。
remove id 移除一个节点和它的子节点。
refresh id 属性指定的节点。
beginEdit id 开始编辑节点。
endEdit id 结束编辑节点。
cancelEdit id 取消编辑节点。
getEditors id 获取指定行的编辑器，每个编辑器都有如下属性：
actions：编辑器可以做的行为。
target：目标编辑器jQuery对象。
field：字段名。
type：编辑类型。
getEditor options 获取指定的编辑器，options包含2个属性：
id：行节点 id。
field：字段名。