JQuery DataGrid 中文文档_jquery datagrid 文档-程序员宅基地

技术标签: string  function  processing  datagrid  jquery  object  

数据表格

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

依赖关系
  • 控制面板
  • 缩放
  • 链接按钮
  • 分页
使用方法
  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. });  
数据表格属性

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

名称 类型 描述 默认值
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
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中数组是对象)。 对象数组中的每一个元素都是可配置的对象,每个可配置对象定义一个列。

示例代码:

  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将显示复选框。 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 调整编辑器

例如,如下代码将定义一个文本编辑器:

  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. });  
数据表格视图

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

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

名称 参数 描述
render target, container, frozen 当数据载入时调用。
target: DOM对象,数据网格对象。
container: 行记录容器。
frozen: 是否呈现固定容器。
renderFooter target, container, frozen 这是一个可选函数用以展现行底。
renderRow target, fields, frozen, rowIndex, rowData 这是一个可选函数,它可以被render函数调用。
refreshRow target, rowIndex 定义如何刷新指定的行。
onBeforeRender target, rows 在视图被呈现之前触发。
onAfterRender target 在视图被程序之后触发。
事件

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

名称 参数 描述
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 当数据表格的列标题被鼠标右键单击时触发。
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 固定特定列的高度。
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参数有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 隐藏特定的列。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/DR_LF/article/details/7429696

智能推荐

解决 Echarts 图表在旧容器上重新渲染不出来的问题_echarts渲染div容器后,为什么div里面之前的div元素没了-程序员宅基地

文章浏览阅读2.2k次,点赞2次,收藏7次。今天修改项目时,由于使用了 Echarts 图表库,在原先的基础上,加上了切换tab标签和根据搜索内容重新渲染图表的需求,由于是异步获取数据后更新渲染图表,然后发现图表重新渲染不出来,由此记录下解决问题的过程。问题描述根据异步获取到的数据重新渲染图表,比如 Echarts 容器标签如下:<div id="chartId"></div>当搜索结果没有数据时,输出一段话提示用户:<div id="chartId"> <p>暂无数据</p&g._echarts渲染div容器后,为什么div里面之前的div元素没了

将图片放入数据库中已经从数据库中把图片读出来_图片放在看板数据源中-程序员宅基地

文章浏览阅读2k次。先讨论一下图片放入数据库中。Oracle数据库中的大对象类型有两种: a.Blob二进制的大对象类型,主要是指音频,视频,图像,word等文档,被认为是二进制的文件。 b.Clob字符型的大对象类型,主要是指文本文件。图片是数据库中的Blob大对象类型。如下代码是将一张图片放入数据库中。import java.io.File;import java.i_图片放在看板数据源中

Ceph 0.80 ubuntu14.04 多节点手动搭建_/ceph/mon-a-程序员宅基地

文章浏览阅读1.4k次。之前写了快速搭建ceph的过程,在使用过程中有很多bug,比如……我关不掉ceph,删不掉osd节点等等等等。。。不知道是我哪里出错了,总之感觉不太好,所以快速搭建给我的感觉就是体验一下ceph到底是个什么东西,生产环境里用不了。这里记录一下我手动搭建的过程。搭建环境:Ubuntu14.04Ceph版本,0.80虚拟机搭建,任然是四个节点(mon节点_/ceph/mon-a

Hubble Zhang的学习日记(第十周)_hubble日志-程序员宅基地

文章浏览阅读99次。为了督促自己每天都有进步,在这里记录下每天遇到的问题和学到的新知识,仅作为个人回顾使用。目录日记(第九周)20201120日记(第九周)20201120候选区域R-CNN,意思就是带区域的卷积网络,这个算法尝试选出一些区域,在这些区域上运行卷积网络分类器是有意义的。利用segmentation得到多个分割区域,然后在这些分割区域中跑分类器来检测这个块里是否有东西。R-CNN算法比较慢,因此衍生了许多升级算法,如Fast R-CNN,Faster R-CNN......._hubble日志

pandas 每一列画图_学习pandas下的dataframe画图参数 ——转载-程序员宅基地

文章浏览阅读337次。学习pandas数据框的绘图,轻松搞定各种图画法。DataFrame.plot(x=None,y=None,kind='line',ax=None,subplots=False,sharex=None,sharey=False,layout=None,figsize=None,use_index=True,title=None,grid=None,legend=True,s..._df plot 每列一个图

超好用的Web开发浏览器插件-Web Developer_web developer插件怎么使用-程序员宅基地

文章浏览阅读6k次,点赞3次,收藏10次。图片太多没有上传,详情请访问www.prchen.com概述Web Developer是一款Web开发人员必备的浏览器实用插件,它提供了多种模块让开发人员可以在工具栏中便捷地对网页的HTML、脚本、多媒体、CSS、缓存、图象等网页内容进行调试。Web Developer适用于Chrome,Firefox和Opera浏览器安装谷歌浏览器插件商店中搜索"Web Developer",或者..._web developer插件怎么使用

随便推点

The server time zone value ‘�й���׼ʱ��‘ is unrecognized or represents more than one time zone.-程序员宅基地

文章浏览阅读545次。在spring和mybatis的启动过程中,数据库启动出现异常

如何打造企业短视频账号的人设?_做的比较有人格化的公司短视频账号-程序员宅基地

文章浏览阅读1k次。人都有惰性,更何况是在碎片化的时间里,抱着轻松一下的目的打开了抖音,我们是不愿意浪费精力到“这个抖音号到底是什么类型的,它是否会持续生产我喜欢和需要的内容”这类问题上。所以,我们在做企业抖音号的人设时,如何化繁为简,把账号的人设做成平台受众的人设:账号简介-简练、直白地体现鲜明个性那些点进账号主页看的受众,多半都是被某一个视频吸引进来的。他们进来的目的只有一个:看看这个账号是不是我喜欢的类型,值不值得我去关注。这时,你的那句账号简介,就像面试或相亲时的自我介绍一样,起着营造受众心中第一印象的至关重_做的比较有人格化的公司短视频账号

一个会做饭的程序员如何每天给女朋友带不同的便当?-程序员宅基地

文章浏览阅读343次。作为一个会做饭的程序员,每天给女朋友和自己带饭是必须的,可是每天要吃什么却是一个世纪难题!以前就想过要开发一个APP,来随机决定明天吃什么菜,然而世界上最痛苦的事情是:我..._csdn 给女朋友做菜单

PendingIntent重定向:一种针对安卓系统和流行App的通用提权方法——BlackHat EU 2021议题详解 (下)_getrunningservicecontrolpanel-程序员宅基地

文章浏览阅读8.9k次,点赞4次,收藏10次。以用户隐私安全为中心,用责任兑付信任,OPPO成立子午互联网安全实验室(ZIWU Cyber Security Lab)。实验室以“保护用户的安全与隐私,为品牌注入安全基因”为使命,持续关注并发力于业务安全、红蓝对抗、IoT安全、Android安全、数据和隐私保护等领域。本篇文章源自OPPO子午互联网安全实验室。1 不安全PendingIntent的通用利用方法1.1 不安全PendingIntent的特征至此,我们已经解决了本议题的第一个问题,经过研究表明,Android系统中使用的Pendin._getrunningservicecontrolpanel

python 之 面向对象(反射、__str__、__del__)-程序员宅基地

文章浏览阅读57次。7.10 反射下述四个函数是专门用来操作类与对象属性的。通过字符串来操作类与对象的属性,这种操作称为反射class People: country="China" def __init__(self,name): self.name=name def tell(self): print('%s is aaa' ...___str__这种

E - Mafia CodeForces - 348A 【二分】_348a二分-程序员宅基地

文章浏览阅读317次。E - Mafia CodeForces - 348A 【二分】One day n friends gathered together to play “Mafia”. During each round of the game some player must be the supervisor and other n - 1 people take part in the game. Fo..._348a二分

推荐文章

热门文章

相关标签