appendGrid-Documentation

小编 2026-07-08 阅读:1030 评论:0

Documentation API Summary Initial Parameters Grid Callbacks Column Parameters Methods capt...

Documentation

API Summary

Initial Parameters	Grid Callbacks	Column Parameters	Methods
caption	nameFormatter	type	isReady
captionTooltip	dataLoaded	name	isDataLoaded
initRows	rowDataLoaded	value	load
maxRowsAllowed	afterRowAppended	display	appendRow
initData	afterRowInserted	displayCss	insertRow
columns	afterRowSwapped	displayTooltip	removeRow
i18n	afterRowDragged	headerSpan	moveUpRow
idPrefix	beforeRowRemove	cellCss	moveDownRow
rowDragging	afterRowRemoved	ctrlAttr	getRowCount
hideButtons	subPanelBuilder	ctrlProp	getUniqueIndex
buttonClasses	subPanelGetter	ctrlCss	getRowIndex
sectionClasses	maxNumRowsReached	ctrlClass	getRowValue
hideRowNumColumn		ctrlOptions	getAllValue
rowButtonsInFront		invisible	getCtrlValue
customGridButtons		resizable	setCtrlValue
customRowButtons		emptyCriteria	getCellCtrl
customFooterButtons		uiOption	getCellCtrlByUniqueIndex
rowCountName		uiTooltip	getRowOrder
useSubPanel		customBuilder	getColumns
maintainScroll		customGetter	showColumn
maxBodyHeight		customSetter	hideColumn
		onClick	isColumnInvisible
		onChange	isRowEmpty
			removeEmptyRows

Initial Parameters

caption

Type: String or Function
Default: null

The text as table caption. You can define a callback function for generating customized caption instead. Set null to disable caption generation.

Example:

$(function() {

$(\'#tblAppendGrid\').appendGrid({

// Define a function to generate a customized caption

caption: function (cell) {

$(cell).css(\'font-size\', \'16pt\').text(\'This is my caption!\');

},

columns: [

{ name: \'Album\', display: \'Album\' },

{ name: \'Artist\', display: \'Artist\' },

{ name: \'Year\', display: \'Year\' }

]

});

captionTooltip

Type: String or Object
Default: null

The tooltip text for caption, which will make use of jQuery UI tooltip. You can pass an object as the initial parameters of jQuery UI tooltip, too.

Example:

$(function() {

$(\'#tblAppendGrid\').appendGrid({

caption: \'My CD Album\',

captionTooltip: {

items: \'td\',

content: \'This is my CD Album\',

show: {

effect: \'fold\',

delay: 250

}

},

columns: [

{ name: \'Album\', display: \'Album\' },

{ name: \'Artist\', display: \'Artist\' },

{ name: \'Year\', display: \'Year\' }

]

});

initRows

Type: Number
Default: 3

The total number of empty rows generated when init the grid. This will be ignored if initData is assigned.

maxRowsAllowed

Type: Number
Default: 0

The maximum number of rows allowed in this grid. Default value is 0 which means unlimited. The maxNumRowsReached callback function will be triggered when row(s) is/are adding to grid after maximum number of row reached.

initData

Type: Array
Default: null

An array of data to be filled after initialized the grid.

Example:

$(function() {

$(\'#tblAppendGrid\').appendGrid({

columns: [

{ name: \'Album\', display: \'Album\' },

{ name: \'Artist\', display: \'Artist\' },

{ name: \'Year\', display: \'Year\' }

],

initData: [

{ Album: \'Album1\', Artist: \'Artist1\', Year: \'2001\' },

{ Album: \'Album2\', Artist: \'Artist2\', Year: \'2003\' },

{ Album: \'Album3\', Artist: \'Artist3\', Year: \'2005\' }

]

});

columns

Type: Array
Default: null

Array of column options. Please refer to Column Parameters for more.

Example:

$(function() {

$(\'#tblAppendGrid\').appendGrid({

columns: [

{ name: \'Album\', type: \'text\', display: \'Album\', ctrlAttr: { maxlength: 100 } },

{ name: \'Artist\', type: \'select\', display: \'Artist\', ctrlOptions: { 0: \'{Choose One}\', 1: \'Theresa Fu\', 2: \'Kelly Chen\' } },

{ name: \'Year\', type: \'ui-spinner\', display: \'Year\', value: new Date().getFullYear(), uiOption: { /* UI spinner Settings */ }

]

});

i18n

Type: Object
Default: null

Labels or messages used in grid.

	append:	The tooltip on the `append` button at the bottom of grid.
	removeLast:	The tooltip on the `remove` button at the bottom of grid.
	insert:	The tooltip on the `insert` button at the end on each row.
	remove:	The tooltip on the `remove` button at the end on each row.
	moveUp:	The tooltip on the `move up` button at the end on each row.
	moveDown:	The tooltip on the `move down` button at the end on each row.
	rowDrag:	The tooltip on the `drag` button at the end on each row, if rowDragging is set to true.
	rowEmpty:	The message to be displayed when no rows in grid.

Example:

$(function() {

$(\'#tblAppendGrid\').appendGrid({

columns: [

{ name: \'Album\', display: \'Album\' },

{ name: \'Artist\', display: \'Artist\' },

{ name: \'Year\', display: \'Year\' }

],

i18n: {

append: \'Hey! Append a new row at bottom!\',

removeLast: \'Caution! Remove the last row!\'

}

});

idPrefix

Type: String
Default: null

The ID prefix of controls generated inside the grid. Table ID will be used if not defined.

Example:

$(function() {

$(\'#tblAppendGrid\').appendGrid({

columns: [

{ name: \'Album\', display: \'Album\' },

{ name: \'Artist\', display: \'Artist\' },

{ name: \'Year\', display: \'Year\' }

],

idPrefix: \'HelloTable\'

});

// The field id and name will be generated as `HelloTable_Album_1`.

});

rowDragging

Type: Boolean
Default: false

Applying jQuery UI Sortable feature to allow re-order grid rows by dragging.

hideButtons

Type: Object
Default: null

Hide the standard action buttons at the end of row or bottom of grid.

	append:	Set to true to hide the `append` button at the bottom or grid.
	removeLast:	Set to true to hide the `remove` button at the bottom of grid.
	insert:	Set to true to hide the `insert` button at the end on each row.
	remove:	Set to true to hide the `remove` button at the end on each row.
	moveUp:	TheSet to true to hide the `move up` button at the end on each row.
	moveDown:	Set to true to hide the `move down` button at the end on each row.

Example:

$(function() {

$(\'#tblAppendGrid\').appendGrid({

columns: [

{ name: \'Album\', display: \'Album\' },

{ name: \'Artist\', display: \'Artist\' },

{ name: \'Year\', display: \'Year\' }

],

hideButtons: {

remove: true,

removeLast: true

}

// Remove buttons will not be displayed

});

buttonClasses

Type: Object
Default: null

The extra class names for buttons.

	append:	The extra class name to be added on the `append` button at the bottom of grid.
	removeLast:	The extra class name to be added on the `remove` button at the bottom of grid.
	insert:	The extra class name to be added on the `insert` button at the end on each row.
	remove:	The extra class name to be added on the `remove` button at the end on each row.
	moveUp:	The extra class name to be added on the `move up` button at the end on each row.
	moveDown:	The extra class name to be added on the `move down` button at the end on each row.
	rowDrag:	The extra class name to be added on the `drag` button at the end on each row, if rowDragging is set to true.

Example:

$(function() {

$(\'#tblAppendGrid\').appendGrid({

columns: [

{ name: \'Album\', display: \'Album\' },

{ name: \'Artist\', display: \'Artist\' },

{ name: \'Year\', display: \'Year\' }

],

buttonClasses: {

insert: \'extra1 extra2\',

moveUp: \'extra3\'

}

});

sectionClasses

Type: Object
Default: null

The extra class names for table sections.

	caption:	The extra class name to be added on the caption table row.
	header:	The extra class name to be added on the column header table row.
	body:	The extra class name to be added on each grid content table row.
	footer:	The extra class name to be added on the footer table row.

Example:

$(function() {

$(\'#tblAppendGrid\').appendGrid({

columns: [

{ name: \'Album\', display: \'Album\' },

{ name: \'Artist\', display: \'Artist\' },

{ name: \'Year\', display: \'Year\' }

],

sectionClasses: {

header: \'extra1 extra2\',

body: \'extra3\'

}

});

hideRowNumColumn

Type: Boolean
Default: false

Hide the row number column which is the first column of grid.

rowButtonsInFront

Type: Boolean
Default: false

Generate row button column in the front of input columns.

customGridButtons

Type: Object
Default: null

Customize the standard grid button such as changing the icon, adding text to the button or even use another button to replace the default one. You can specify jQuery UI Button initial parameter, a DOM element or a function that create a DOM element for each of the following button.

	append:	The jQuery UI button initial parameter or DOM element or a function that create a DOM element as the `append` button at the bottom of grid.
	removeLast:	The jQuery UI button initial parameter or DOM element or a function that create a DOM element as the `remove` button at the bottom of grid.
	insert:	The jQuery UI button initial parameter or DOM element or a function that create a DOM element as the `insert` button at the end on each row.
	remove:	The jQuery UI button initial parameter or DOM element or a function that create a DOM element as the `remove` button at the end on each row.
	moveUp:	The jQuery UI button initial parameter or DOM element or a function that create a DOM element as the `move up` button at the end on each row.
	moveDown:	The jQuery UI button initial parameter or DOM element or a function that create a DOM element as the `move down` button at the end on each row.

Example:

$(function() {

$(\'#tblAppendGrid\').appendGrid({

columns: [

{ name: \'Album\', display: \'Album\' },

{ name: \'Artist\', display: \'Artist\' },

{ name: \'Year\', display: \'Year\' }

],

customGridButtons: {

// Use jQuery UI Button initial parameter

append: { icons: { primary: \'ui-icon-star\' }, text: true, label: \'Append!\' },

// Use a DOM element

insert: $(\'<button/>\').css(\'color\', \'red\').text(\'Insert\').get(0),

// Use a function that create DOM element

moveUp: function (){

var button = document.createElement(\'input\');

button.type = \'button\';

button.value = \'^^^\';

return button;

}

});

customRowButtons

Type: Array
Default: null

Add an array of customized buttons to the last cell of each row. The generated buttons are supported all jQuery UI Button widget parameters with a click event handler.

	uiButton:	Required. Object of parameters used to initial jQuery UI Button widget.
	click:	Required. A event handler to be called when the generated button is clicked. Followings are the parameters will be sent to this event handler: 1. evtObj: The standard jQuery event object. 2. uniqueIndex: The uniqueIndex of that row. 3. rowData: An object contains the values of all controls of that row.
	btnCss:	The extra CSS to be added on the generated button.
	btnClass:	The extra classes to be added on the generated button.
	btnAttr:	The extra attributes to be added on the generated button.
	atTheFront:	Set to true for generate button at the front of standard action buttons.

Example:

$(function() {

$(\'#tblAppendGrid\').appendGrid({

columns: [

{ name: \'Album\', display: \'Album\' },

{ name: \'Artist\', display: \'Artist\' },

{ name: \'Year\', display: \'Year\' }

],

customRowButtons: [

{

uiButton: { icons: { primary: \'ui-icon-star\' }, text: false },

click: setFavorite, btnCss: { \'min-width\': \'30px\' },

btnAttr: { title: \'Set favorite!\' }, atTheFront: true

},

{

uiButton: { icons: { primary: \'ui-icon-print\' }, label: \'Print\' },

click: function (evtObj, uniqueIndex, rowData) {

alert(\'You clicked the print button!\');

},

btnClass: \'print\'

}

]

});

function setFavorite(evtObj, uniqueIndex, rowData) {

alert(\'I know you love this album now :)\');

// Check the caller button exist in event object

if (evtObj && evtObj.target) {

// Do something on the button, such as disable the button

$(evtObj.target).button(\'disable\');

}

customFooterButtons

Type: Array
Default: null

Add an array of customized buttons to the bottom of grid. The generated buttons are supported all jQuery UI Button widget parameters with a click event handler.

	uiButton:	Required. Object of parameters used to initial jQuery UI Button widget.
	click:	Required. A event handler to be called when the generated button is clicked. The first parameter of the call back function is the standard jQuery event object.
	btnCss:	The extra CSS to be added on the generated button.
	btnClass:	The extra classes to be added on the generated button.
	btnAttr:	The extra attributes to be added on the generated button.
	atTheFront:	Set to true for generate button at the front of standard action buttons.

Example:

$(function() {

$(\'#tblAppendGrid\').appendGrid({

columns: [

{ name: \'Album\', display: \'Album\' },

{ name: \'Artist\', display: \'Artist\' },

{ name: \'Year\', display: \'Year\' }

],

customFooterButtons: [

{

uiButton: { icons: { primary: \'ui-icon-refresh\' }, label: \'Refresh\' },

btnCss: { \'color\': \'#ff0000\' },

click: function (evt) {

alert(\'You clicked `Refresh` button!\');

},

atTheFront: true

},

{

uiButton: { icons: { primary: \'ui-icon-arrowthickstop-1-s\' }, text: false },

btnAttr: { title: \'Download Data\' },

click: function (evt) {

alert(\'Download is in process...\');

}

]

});

rowCountName

Type: String
Default: \'_RowCount\'

The variable name of row count used for object mode of `getAllValue` method.

useSubPanel

Type: Boolean
Default: false

Use the sub panel or not.

maintainScroll

Type: Boolean
Default: false

The web browser will maintain the scroll position when add or remove row if this parameter is set to true.

maxBodyHeight

Type: Number
Default: 0

The maximum height of table body. Vertical scrollbar will be displayed when this height limit is reached. Default value is 0 which means this limit will not be applied.

Example:

$(function() {

$(\'#tblAppendGrid\').appendGrid({

columns: [

{ name: \'Album\', display: \'Album\' },

{ name: \'Artist\', display: \'Artist\' },

{ name: \'Year\', display: \'Year\' }

],

maxBodyHeight: 240, // Limit the table body height to 240px

maintainScroll: true // Scroll the table body when new rows are appended

});

Grid Callbacks

nameFormatter(idPrefix, name, uniqueIndex)

Type: Function

The callback function for format the HTML name of generated controls.

	idPrefix:	The idPrefix defined in Initial Parameters.
	name:	The name of column.
	uniqueIndex:	The unique index assigned to this row.

Example:

$(function() {

$(\'#tblAppendGrid\').appendGrid({

columns: [

{ name: \'Album\', display: \'Album\' },

{ name: \'Artist\', display: \'Artist\' },

{ name: \'Year\', display: \'Year\' }

],

nameFormatter: function (idPrefix, name, uniqueIndex) {

// It is OK to just use the `name` to name the control.

// So, server side can receive values in array format.

// The generated elements will be something like that:

//

// <input id=\"tblAppendGrid_Album_1\" name=\"Album\" type=\"text\" />

// <input id=\"tblAppendGrid_Album_2\" name=\"Album\" type=\"text\" />

// <input id=\"tblAppendGrid_Album_3\" name=\"Album\" type=\"text\" />

//

// C#/ASP.NET

// string[] albums = Request.Form.GetValues(\"Album\");

//

// PHP

// $albums = $_POST[\'Album\'];

//

return name;

}

});

dataLoaded(caller, records)

Type: Function

The callback function to be triggered after data loaded to grid.

	caller:	The table object that triggered this event.
	records:	The array of data that loaded to grid.

rowDataLoaded(caller, record, rowIndex, uniqueIndex)

Type: Function

The callback function to be triggered after data loaded to a row.

	caller:	The table object that triggered this event.
	record:	The data object that loaded to this row.
	rowIndex:	Row index of target row.
	uniqueIndex:	Unique index of target row.

afterRowAppended(caller, parentRowIndex, addedRowIndex)

Type: Function

The callback function to be triggered after new row appended.

	caller:	The table object that triggered this event.
	parentRowIndex:	The index of row that above new added rows. This value will be null when table is empty.
	addedRowIndex:	An array of row index added.

Example:

$(function() {

$(\'#tblAppendGrid\').appendGrid({

columns: [

{ name: \'Album\', display: \'Album\' },

@font-face { font-family: "autolinktags"; src: url("https://www.seowoai.com/zb_users/plugin/AutoLinkTags/style/fonts/iconfont.woff2") format("woff2"), url("https://www.seowoai.com/zb_users/plugin/AutoLinkTags/style/fonts/iconfont.woff") format("woff"), url("https://www.seowoai.com/zb_users/plugin/AutoLinkTags/style/fonts/iconfont.ttf") format("truetype"); font-weight:normal; font-style:normal; }.tagslink::after { content:"\e613"; margin:2px 0 0 0px; font-size:12px; font-family:"autolinktags"; display:inline-block; vertical-align:top; }

`版权声明`


本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。


									
				上一篇：Golang开发者常见的坑				下一篇：Linux共享库、静态库、动态库详解			
		
				
			相关阅读
			
												
					
						
							
						
						
							传统IT公司/创业公司/互联网大公司的offer如何选择？[转载+原创]
							 背景介绍: 第一家工作的公司是一家跨国外企安全公司, 骄傲的称自己不是互联网公司而是传统软件公司, 第二家公司是当下最热的知识分享社区, 创业公司. 第三家公司是挤走谷歌, 曾一度称霸中国的搜索引擎公司, 体量很大的著名三大互联网公司之一.每一家公司我都接触的不是很久, 没能用一生的时间来体验一个公司, 只能说一下我在短时间看到的优...
						
					
				
								
					
						
							
						
						
							dataTable 中 ajax 请求 从第二次开始触发请求事件，却不再发送请求的问题
							demo如下（红色不部分是解决方法）：
//请求触发事件
$(\'#imageAnaBtn\').on(\'click\', function () {

    // ...其它代码...

    //如果base_table对象已存在 则销毁；其中base_table是全局变量。
    if (base_table != undefined && base_table != \"undefined\" &&a...
						
					
				
								
					
						
							
						
						
							常用工具函数
							// 数组移除元素
Array.prototype.remove = function(val) {
    var index = this.indexOf(val);
    if (index > -1) {
        this.splice(index, 1);
    }
};

// 清除所有cookie
function clearAllCookie() {
    var keys = document.cook...
						
					
				
								
					
						
							
						
						
							appendGrid-Documentation
							Documentation

API Summary

Initial Parameters
			Grid Callbacks
			Column Parameters
			Methods
		caption
			nameFormatter
			type
			isReady
		captionTooltip
			dataLoaded
			name
			isDataLoaded
		initRows
			rowDataLoad...
						
					
				
								
					
						
							
						
						
							白话垃圾回收实战
							借用了这里的一张图，如侵权请联系删除。

这次实战是《深入理解Java虚拟机》 P92 的例题，这里分析加强记忆。
参数
新生代：Parallel Scavenge收集器
老年代：ParOld收集器
-Xms20M:设置JVM最大可用内存/堆为20M。
-Xmx20M:设置JVM促使内存为20m。此值可以设置与-Xmx相同，以避免每次垃圾回收完成后JVM重新分配内存。
-Xmn10M:设置新生代内存大小10m，那么很容易算出老年...
						
					
				
								
					
						
							
						
						
							2017 从上到下打印树新解法
							老解法： using namespace std;struct Node {    int value;    Node* lchild;    Node* rchild;};queue<Node*> Q;void bfs(Node* pn) {    if(pn == NULL) return;    Q.push(pn...
						
					
				
											
		
						
	
	

	    	


	热门文章
	
						
			Sequential Monte Carlo Methods (SMC) 序列蒙特卡洛/粒子滤波/Bootstrap Filtering
			
			Problem Statement
我们考虑一个具有马尔可夫性质、非线性、非高斯的状态空间模型(State Space Model)：对于一个时间序列上的观测结果{yt,t∈N}\\{ y_t , t \\in N \\}{yt,t∈N}，我们认为每个观测结果yty_tyt的生成依赖于一个无法直接观察的隐变量xt∈{xt,t∈N}x_t \\in \\{x_t , t \\in N \\}xt∈{xt,t∈N}，即：p(...
		
				
			机房智能化温湿度解决方式之POE供电以太网温湿度传感器
			
			机房智能化温湿度解决方式之POE供电以太网温湿度传感器
北京盈创力和电子科技有限公司
智能型TCP网口温湿度记录仪 北京IP网络温湿度记录仪厂家，北京盈创力和
北京智能型TCP网口温湿度记录仪IP网络温湿度记录仪是一种新型的基于TCP/IP协议双绞线以太网标准温湿度采集模块，利用它可以实现现场温度值、相对湿度值的采集，同时利用其自身的RJ45通信接口可以方便地和机房监控主机或交换机集线器进行联网。
工作于-40℃～85℃工业级带...
		
				
			Hive 系统函数及示例
			
			查看所有系统函数
show functions;

函数分类
内置函数【系统函数】
数学函数：
floor、round、ceil、cos、log2等
字符串函数：
length、reverse、trim、lower、get_json_object、repeat等
收集函数：
size
转换函数：
cast
日期函数：
year、month、datediff、date、date_add等
条件函数：
coalesce、case…w...
		
				
			CSRF的原理和防范措施
			
			a)攻击原理：i.用户C访问正常网站A时进行登录，浏览器保存A的cookieii.用户C再访问攻击网站B，网站B上有某个隐藏的链接或者图片标签会自动请求网站A的URL地址,例如表单提交，传指定的参数iii.而攻击网站B在访问网站A的时候，浏览器会自动带上网站A的cookieiv.所以网站A在接收到请求之后可判断当前用户是登录状态，所以...
		
				
			HTTP状态保持的原理
			
			a)在用户登录之后，浏览器返回响应的时候会在响应中添加上cookieb)浏览器接收到cookie之后会自动保存c)当用户再次请求同一服务器中的其他网页的时候，浏览器会自动带上之前保存的cookied)服务接收到请求之后可以请 request 对象中取到cookie 判断当前用户是否登录　　Http是无状态的，就是连接时数据互通，关闭后...
		
			




	最近发表
	Docker如何实现修改Docker0网桥默认网段
Xshell 5连接上suse
用C#做网络爬虫的步骤教学
suse双网卡绑定
Docker实现同Ip网段联通的实现
硬盘分区挂载和取消挂载
suse12安装详解
php workerman定时任务的实现代码
Centos7上部署openstack mitaka配置详解（将疑难点都进行划分）
详解SpringBoot注入数据的方式
菜鸟帮你跳过openstack配置过程中的坑[文末新添加福利]
Python数据抓取爬虫代理防封IP方法
openstack中dashboard页面RuntimeError: Unable to create a new session key. It is likely that the cache is unavailable.
SpringBoot之RabbitMQ的使用方法
Multiple network matches found for name 'selfservice', use an ID to be more specific.报错






	标签列表
	None


        

	
		
				Powered By Z-BlogPHP  Theme By 老白编程