API-常规选项

General options(常规选项)

如何设置常规选项

  1. 设置列是否可以调整宽度:
<script type="text/javascript">
    $(document).ready(function () {         
       $('#MyTableContainer').jtable({
            columnResizable: false; //disable column resizing
            //other options...
        });     
    });
</script>
  1. 如果想要禁用整个表格的列调整,可以这样设置:
<script type="text/javascript">
    $.hik.jtable.prototype.options.columnResizable = false;
</script>

常规选项列表

<a id="addRecordButton"></a>

addRecordButton jQuery object default: auto-generated link

是一个jquery对象(dom元素),可以用来代替默认的“+ add new record”链接。因此,可以设置页面上的任何一个元素来打开“添加新纪录弹框”。
<a id="ajaxSettings"></a>

ajaxSettings object

一个对象,定义了jTable中执行ajax请求的选项。前往$.ajax查看详细的选项。

默认值:

ajaxSettings: {
    type: 'POST',
    dataType: 'json'
}

这个选项覆盖了默认的ajaxSetting,如果只想改变类型,可以这样设置:

ajaxSettings: { type: 'GET' }

<a id="animationsEnabled"></a>

animationsEnabled boolean default: true

表示当用户CRUD的时候,jTable是否展示动画。
<a id="columnResizable"></a>

columnResizable boolean default: true

当用户拖拽列的时候是否允许jTable改变列的大小。
<a id="columnSelectable"></a>

columnSelectable boolean default: true

当用户右击表头的时候是否允许显示/隐藏数据。(当右击表头title时,会出现一个列表,可以勾选列名,用于隐藏展示列)
<a id="defaultDateFormat"></a>

defaultDateFormat string default: 'yy-mm-dd'

用来定义时间的格式。jQueryUI datepicker formats
<a id="defaultSorting"></a>

defaultSorting string default: none

表格默认的排序方式。可以是表中的任何一个字段。例如:想用Name来排序,可以这样设置 “Name ASC”或者“Name DESC”。
<a id="deleteConfirmation"></a>

deleteConfirmation boolean or function default: true

这个选项可以是bool值或者是一个function。假如是bool值,代表着当用户点击删除的时候是否展示确认框。

假如是一个function,它可以完全控制删除确认框的处理过程。必须是像下面的function一样。

deleteConfirmation: function(data) {
    //...
}

data参数包含一些控制确认处理过程的属性:

  • row:是一个删除当前行的jQuery选择器
  • record:要删除当前行的数据。例如,你可以从中获取Name属性:data.record.Name。
  • cancel:你可以设置 data.cancel 为true来取消删除进程(默认是false)。就是设置为true之后点击删除按钮没有反应,不在处理。
  • cancelMessage:如果你取消了删除进程,可以设置这个属性向用户展示一个信息。如果不想展示任何信息就不需要设置。
  • deleteConfirm:一个bool值,代表是否展示一个删除确认信息给用户(默认是true)。
  • deleteConfirmMessage:假如开启了确认提示,可以自定义确认信息。
    假如你想展示一些附加的信息给用户,可以这样写:
deleteConfirmation: function(data) {
    data.deleteConfirmMessage = 'Are you sure to delete person ' + data.record.Name + '?';
}

<a id="dialogShowEffect"></a>

dialogShowEffect string default: 'fade'

在打开jQueryUI对话框时要展示的效果。一些选项: 'blind', 'bounce', 'clip', 'drop', 'explode', 'fold', 'highlight', 'puff', 'pulsate', 'scale', 'shake', 'size', 'slide'。jQueryUI 文档
<a id="dialogHideEffect"></a>

dialogHideEffect string default: 'fade'

当关闭对话框时要展示的效果。一些选项: 'blind', 'bounce', 'clip', 'drop', 'explode', 'fold', 'highlight', 'puff', 'pulsate', 'scale', 'shake', 'size', 'slide'。jQueryUI 文档
<a id="gotoPageArea"></a>

gotoPageArea string default: 'combobox'

如果开启了分页,这个值决定了如何展示“go to page”输入框。有以下选项:

  • combobox:展示一个下拉框,包含了所有的页,允许用户选择自己想要查看的页数。
  • textbox:展示一个文本框,让用户自己输入页数。
  • none:不展示“go to page”输入框。

<a id="jqueryuiTheme"></a>

jqueryuiTheme boolean default: false

jTable有自己的主题样式,可以直接使用。但是,你可能希望将jQueryUI的样式用在jTable上。所以,这个选项可以决定让jTable用jQueryUI的颜色和样式。在jTable初始化代码中设置jqueryuiTheme: true,并且在页面上包含所需的样式文件:

<!-- jQueryUI's css file -->
<link href="/Scripts/jqueryUi/themes/redmond/jquery-ui-1.10.1.custom.min.css")" rel="stylesheet" type="text/css" />
<!-- jTable's jQueryUi css file -->
<link href="/Scripts/jtable/themes/jqueryui/jtable_jqueryui.css")" rel="stylesheet" type="text/css" />

jQueryUI有着丰富的主题系统。 http://jqueryui.com/themeroller/
<a id="loadingAnimationDelay"></a>

loadingAnimationDelay int default: 500

jTable延迟‘loading...’动画一段时间,以允许ajax请求完成。如果没在指定时间内完成请求,那么将展示动画。这个选项定义了超时值(以毫秒为单位)。如果要禁用这个功能,设置为0即可。
<a id="messages"></a>

messages object

用于本地化jTable。详看localization
<a id="multiselect"></a>

multiselect boolean default: false

代表是否允许用户同时选择多个行。
<a id="multiSorting"></a>

multiSorting boolean default: false

代表是否允许用户根据多个列进行排序。如果设置为true,用户可以按住CTRL键执行多列排序。

假如用户选择了多列排序,jTable会发送这样的格式:‘Name DESC,BirthDay ASC’。更多信息查看listAction
<a id="openChildAsAccordion"></a>

openChildAsAccordion boolean default: false

如果此选项设置为true,则在打开子表时(手风琴样式),jTable会自动关闭其它打开的子表。
<a id="paging"></a>

paging boolean default: false

代表jTable是否开启分页。如果开启,jTable会发送额外的分页参数到服务器。更多信息查看listAction
<a id="pageList"></a>

pageList string default: 'normal' 但是默认好像是minimal

此选项用于选择页面列表类型。可选值:

  • minimal:只显示第一页、上一页、下一页和最后一页。
  • normal:除了minimal显示的,还会显示所有的页码。

<a id="pageSize"></a>

pageSize number default: 10

假如开启了分页,此值决定了一页包含多少条数据。这个选项可以不再初始化代码中指定,就像下面代码一样:

$('#MyTableContainer').jtable('option', 'pageSize', 20);

<a id="pageSizes"></a>

pageSizes array of numbers default: [10, 25, 50, 100, 250, 500]

假如开启了分页,这个选项决定了在页码选择下拉框中展示的数字。默认就是上面的那个,可以自己设置一个number array。
<a id="pageSizeChangeArea"></a>

pageSizeChangeArea boolean default: true

假如开启了分页,此值决定了pageSizes是否可见。
<a id="saveUserPreferences"></a>

saveUserPreferences boolean default: true

代表jTable是否 保存/加载 用户的偏好,例如列的宽度。保存/恢复偏好是由jTable生成的哈希值,所有的列名和总列数。所以,改变列也会改变保存的哈希值。
<a id="selecting"></a>

selecting boolean default: false

代表jTable是否允许用户在表格中选择行。
<a id="selectingCheckboxes"></a>

selectingCheckboxes boolean default: false

当开启了selecting,此值决定是否在每行显示一个checkbox。
<a id="selectOnRowClick"></a>

selectOnRowClick boolean default: true

代表jTable是否允许用户点击行的任何位置就可以选中当前行。设置为false,只能点击checkbox才可以选中行。
<a id="showCloseButton"></a>

showCloseButton boolean default: false

代表jTable是否为表格显示一个关闭按钮。当用户点击关闭按钮时,closeRequested事件会被触发。jTable内部使用此选项来关闭子表。
<a id="sorting"></a>

sorting boolean default: false

代表jTable是否允许对表格进行排序。
<a id="tableId"></a>

tableId string default: none

一个字符串,是这个表格的唯一标识。此值用于保存/恢复用户的偏好。如果设置了,会设置为表格的id属性。这个选项是可选的。
<a id="title"></a>

title string default: none

一个字符串,用来设置表格的标题。如果是没有设置,标题区域根本不会显示。
<a id="toolbar"></a>

toolbar object default: none

这个选项用来控制jTable的工具栏和子项。默认就只有一个“add new record”(这个是jTable自动添加的,如果设置了createAction)。通过这个选项,你可以添加自定义项。

默认值:

toolbar: {
    hoverAnimation: true, //启用/禁用当鼠标悬浮到工具栏项的动画
    hoverAnimationDuration: 60, //悬浮动画的持续时间
    hoverAnimationEasing: undefined, //缓和悬浮动画。如果设置为undefined,则使用jQuery的默认动画(‘swing’)
    items: [] //自定义工具栏项的数组
}

下面是一个简单的自定义工具栏:

toolbar: {
    items: [{
        icon: '/images/excel.png',
        text: 'Export to Excel',
        click: function () {
            //perform your custom job...
        }
    },{
        icon: '/images/pdf.png',
        text: 'Export to Pdf',
        click: function () {
            //perform your custom job...
        }
    }]
}

icontextclick是可选的。但是必须定义‘icon’和‘text’其中一个,否则jTable不会显示这个项。在click函数中,你可以写自定义javascript脚本。

你可以为工具栏项添加一些附加的选项:

  • cssClass:为工具栏项添加自定义的css样式
  • tooltip:为每个项添加一个tip。jTable会设置到‘title’属性上

<a id="unAuthorizedRequestRedirectUrl"></a>

unAuthorizedRequestRedirectUrl string default: none

当ajax请求到服务器,返回UnAuthorizedRequest = true或者HTTP状态码是401的时候,跳转页面的一个地址。如果这个选项没有设置,jTable会刷新这个页面。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容