永久域名注册网站,重庆市建设工程信息网安全监督特种人员,Wordpress使用ldap,wordpress 4.8上传漏洞概述 特别说明 本文档仅适用于最新版的B-JUI#xff0c;网站首页或下载页可以查看B-JUI的最后更新时间。 B-JUI前端管理框架适用于快速开发各类WEB管理系统#xff0c;可与任意后端程序#xff08;java、php、.net...#xff09;配合使用。 B-JUI基于Bootstrap样式及jQuery…概述 特别说明 本文档仅适用于最新版的B-JUI网站首页或下载页可以查看B-JUI的最后更新时间。 B-JUI前端管理框架适用于快速开发各类WEB管理系统可与任意后端程序java、php、.net...配合使用。 B-JUI基于Bootstrap样式及jQuery库开发目前有各类常用组件已集成部分常用插件可以很的方便引入第三方jQuery插件。 B-JUI目录结构 B-JUI/
├── js/
│ ├── bjui-all.js
│ ├── bjui-all.min.js
│ ├── bjui-all.min.js.map
│ ├── jquery-1.11.3.min.js
│ ├── jquery.cookie.js
├── themes/
│ ├── blue/
│ ├── green/
│ ├── purple/
│ ├── css/
│ │ ├── FA/
│ │ ├── img/
│ │ ├── style.css
│ │ ├── bootstrap.min.css
│ │ └── ie7.css
│ └── fonts/
├── plugins/
│ ├── bootstrap.min.js
│ └── 其他插件...
└── other/ js 目录是B-JUI的js及jQuery jquery-1.11.3.min.js 。 themes 目录是样式文件包含B-JUI样式文件style.css 和 bootstrap.css 及 蓝、绿、紫 三套皮肤以及 Font Awesome 字体。 plugins 目录包含 bootstrap.min.js 及其他用到的插件。 页面结构 框架主页面结构 主页面结构的html代码请参考下载压缩包中的 index.html 。 子页面结构如下 div classbjui-pageHeader!-- 顶部模块[如功能按钮、搜索面板] --
/divdiv classbjui-pageContent!-- 内容区 --
/divdiv classbjui-pageFooter!-- 底部模块[如操作按钮] --
/div子页面主要用于创建 navtab 、 dialog 页面。 初始化框架 BJUI.init(options)options参数请参考下载目录中的 index.html 文件。 DOM元素ID命名规范 因为本框架默认所有内容都位于一个Document中所以为元素命名ID的时候需要做到唯一性如果确实不可避免的会出现有重复ID的现象需要操作当前子页面的元素时尽量用$.CurrentNavtab.find(#dom-id) 在当前标签工作区中查找指定ID的元素。或 $.CurrentDialog.find(#dom-id) 在当前弹窗中查找指定ID的元素。 全局事件 B-JUI的全局事件如下 事件名称中文说明描述bjui.initUI框架初始化事件监听该事件可以为指定的DOM初始化框架组件及插件例如本框架监听该事件用于在文档加载完成或ajax加载完成时初始化框架及插件bjui.beforeInitUI框架初始化前事件监听该事件可以在框架初始化前进行相关操作。例如本框架的任一容器DOM如果添加了属性[data-noinittrue]该容器内的元素都不会被初始化处理这个流程就监听了本件事。bjui.afterInitUI框架初始化后事件监听该事件可以在框架初始化后进行相关操作示例同上。bjui.ajaxStatusajax请求状态事件框架内部事件。本事件用于在ajax请求过程中ajaxStart - ajaxStop显示/隐藏 框架的Mask loading效果。bjui.resizeGrid窗口缩放事件监听该事件可在浏览器窗口或dialog窗口缩放时进行相关操作。bjui.beforeAjaxLoadajax载入前事件监听该事件可在使用ajaxUrl方法 (navtab/dialog均用此方法加载子页片内容) 前进行相关操作例如本框架监听该事件用于在重载入子页片前释放在body中生成的selectpicker插件资源。下面是一个事件示例来自DEMO中作用是代码片断着色及添加COPY按钮 $(document).on(BJUI.eventType.afterInitUI, function(event) {$(event.target).find(.highlight).each(function(){var bdiv classzero-clipboardspan classbtn-clipboardCopy/span/div;var p$(this).find( pre.prettyprint);p.addClass(linenums).html($.trim(p.html()));prettyPrint();$(this).before(b);})
})data属性 同 Bootstrap 一样你可以仅仅通过 data 属性 API 就能使用 B-JUI提供的插件而无需写 JavaScript 代码如下面的代码就是调用信息提示框 alertmsg 的用法。 button typebutton classbtn-default data-togglealertmsg data-options{type:info, msg:我是一个普通的信息提示}信息提示/buttonjavascript API 除了data属性之外也提供 javascript 的 API如下面的代码将实现同上面data属性一致的效果。 button typebutton classbtn-default οnclickalertmsg_onclick();信息提示/button
script typetext/javascript
function alertmsg_onclick() {BJUI.alertmsg(info, 我是一个普通的信息提示)
}
/scripturl动态赋值 URL动态赋值指的是url中包含{ selector }即大括号括起来的jQuery选择器当提交该url时框架会自动将selector对应元素的值替换到大括号所占区域。 后面的文档中凡是标记有 D-Url 字样的URL参数均支持动态赋值通常支持动态赋值的url同时支持warn参数warn参数携带动态赋值不成功时的提示信息。 字符串函数等 方法参数说明返回描述及示例$(form).serializeJson()--json将表单域内容转换为json格式。$(selector).isTag(tagName)html元素名称boolean判断当前jQuery对象的标签名是否为tagName。示例if ($(#test-aa).isTag(a)) {alert(我是一个a链接)}string.isPositiveInteger()--boolean判断字符串是否是正整数。示例var aa 112233; alert(aa.isPositiveInteger())string.isInteger()--boolean判断字符串是否是整数。示例var aa -112233; alert(aa.isInteger())string.isNumber()--boolean判断字符串是否是数字。示例var aa 112.233; alert(aa.isNumber())string.isNormalID()--boolean判断字符串是以字母开头并由数字、字母、中横线、下划线组成。示例var aa navtab-test_1; alert(aa.isNormalID())string.includeChinese()--boolean判断字符串是否包含汉字。示例var aa 中国520; alert(aa.includeChinese())string.trim()--string去除字符串两端空格同jQuery的$.trim(string)。示例var aa 11哈11 ; alert(aa.trim())string.startsWith(str)待比较的字符串boolean判断字符串是否以str开头。示例var aa hello112233; alert(aa.startsWith(hello))string.endsWith(str)待比较的字符串boolean判断字符串是否以str结尾。示例var aa 112233hello; alert(aa.endsWith(hello))string.replaceSuffix(index)--boolean判断字符串是否是正整数。示例var aa 112233; alert(aa.isPositiveInteger())string.encodeTXT()--string转义html字符串。示例 Copy var html p我是一行数据/p; alert(html.encodeTXT()) string.trans()--string还原已转义的html字符串。示例var html p我是一行数据/p; alert(html.trans())string.replaceAll(ostr, nstr)搜索字符串替换字符串boolean替换所有匹配的字符串。示例var aa 1122331122; alert(aa.replaceAll(11, **))string.toBool()--boolean将字符串转为boolean型。示例var aa true; alert(aa.toBool())string.toJson()--string|json将字符串转换为json成功转换返回json失败返回源字符串。示例var aa {name:张三}.toJson(); alert(typeof aa object ? aa.name : aa)string.toObj()--string|object将字符串转换为object成功转换将返回object失败返回源字符串。示例var aa {name:张三, age:30}; aa aa.toObj(); alert(typeof aa object ? aa.age : aa)string.toFunc()--string|object将字符串转换为function成功转换将返回function失败返回源字符串。示例var aa function() {alert(我是一个方法~)}; aa aa.toFunc(); if (typeof aa function) {aa.apply()}。还支持window对象下的字符串函数名转换示例2window.testfunc function() { alert(我是一个window方法) }; var aa testfunc.toFunc(); if (typeof aa function) {aa.apply()} Navtab 通过页面结构图可以看出Navtab是B-JUI框架的重要组成部分除去顶部导航及侧边栏后就是Navtab。Navtab采用标签形式显示多个子页面按住标签不放可以拖动排序在标签上右键可以刷新或关闭标签。 使用 通过data属性 button typebutton classbtn-default data-togglenavtab data-options{id:test_navtab1, url:/html/base/navtab-demo1.html, title:示例Navtab1}打开Navtab1/button通过JS API BJUI.navtab({id:test_navtab3,url:/html/base/navtab-demo3.html,title:示例Navtab3
})参数 名称类型默认值描述idstringundefined[必选] 标签的ID如果指定重复将覆盖现有的ID相同标签。titlestringNew tab[可选] 标签打开后显示的名称。urlstringundefined[必选] D-Url 请求数据的urla链接触发时可以将url定义在href属性。externalbooleanfalse[可选] 是否以iframe方式加载外部页面。typestringGET[可选] Http请求方式可选‘GET/POST’。dataobject{}[可选] 请求url时需要发送的data数据。loadingmaskbooleantrue[可选] ajax请求时是否显示数据加载遮罩。freshbooleanfalse[可选] 是否保持该navtab的新生状态表现在重复打开该navtab时是否重新载入内容。reloadWarnstringnull[可选] 当准备在已存在的navtab上加载内容时的确认提示信息。autorefreshboolean/int(秒)false[可选] 指定该navtab是否可自动刷新为true时默认间隔15秒自动刷新指定具体的秒数则以指定的间隔秒值自动刷新。onLoadfunction($navtab)null[可选] navtab加载完成后的事件回调回调函数的参数$navtab为该navtab内容区的jQuery对象。beforeClosefunction($navtab)null[可选] 返回值: boolean。 navtab关闭前的事件回调返回true则关闭返回false不关闭。onClosefunction()null[可选] navtab关闭后的事件回调。方法 方法名参数类型参数说明描述switchTab(tabid)string标签ID切换到某个标签。refresh(tabid)string标签IDID为空则刷新当前标签刷新某个标签。reloadFlag(tabids)string一个或多个标签ID多个ID以,分隔为某(几)个标签设定重载标记(当切换到该标签时重新载入)。reload(options)object同navtab默认参数重新载入某个标签如果未指定ID则默认重载入当前标签。closeTab(tabid)string标签ID关闭某个标签。closeCurrentTab([tabid])string标签ID可选。关闭当前标签。closeAllTab()----关闭所有标签。方法使用示例 // 刷新ID为 navtab-test-1 的Navtab
BJUI.navtab(refresh, navtab-test-1)Dialog Dialog是浮动在主页面上的弹出窗口分为普通弹窗和模态弹窗。Dialog是B-JUI的重要组成部分可以进行最大化最小化拖动大小和位置等操作。 使用 通过data属性 button typebutton classbtn-default data-toggledialog data-options{id:test_dialog1, url:/html/base/dialog-demo1.html, title:示例Dialog1}打开Dialog1/button通过JS API BJUI.dialog({id:test_dialog3,url:/html/base/dialog-demo3.html,title:示例Dialog3
})参数 名称类型默认值描述idstringdialog[必选] 弹窗的ID如果指定重复将覆盖现有的ID相同弹窗。titlestringNew Dialog[可选] 弹窗打开后显示的名称可从data-title属性获取或直接获取触发DOM的text值。urlstringundefined[可选] 参数url、image、html、target必选一项优先级url image html target。 D-Url 请求数据的urla链接触发时可以将url定义在href属性。imagestringnull[可选] 图片地址让dialog显示该图片image参数可以使用encodeURI函数编码。htmlstringnull[可选] 指定一段html内容加载到dialog。targetselectornull[可选] 从指定的jQuery容器中加载内容到dialog请为该容器添加属性data-noinittrue以阻止容器中的内容提前初始化为容器添加Class[hide]以隐藏待加载内容。typestringGET[可选] Http请求方式可选‘GET/POST’。dataobject{}[可选] 请求url时需要发送的data数据。loadingmaskbooleantrue[可选] ajax请求时是否显示数据加载遮罩。widthint500[可选] 弹窗的宽度。heightint300[可选] 弹窗的高度。maxbooleanfalse[可选] 打开弹窗时直接最大化。maskbooleanfalse[可选] 是否模态窗口。resizablebooleantrue[可选] 可以调整弹窗的大小。drawablebooleantrue[可选] 可以拖动弹窗。maxablebooleantrue[可选] 是否显示最大化按钮。minablebooleantrue[可选] 是否显示最小化按钮模态弹窗无效。freshbooleanfalse[可选] 是否保持该dialog的新生状态表现在重复打开该dialog时是否重新载入内容。reloadWarnstringnull[可选] 当准备在已存在的dialog上加载内容时的确认提示信息。onLoadfunction($dialog)null[可选] dialog加载完成后的事件回调回调函数的参数$dialog为该dialog的jQuery对象。beforeClosefunction($dialog)null[可选] 返回值: boolean。 dialog关闭前的事件回调返回true则关闭返回false不关闭。onClosefunction()null[可选] dialog关闭后的事件回调。方法 方法名参数类型参数说明描述switchDialog(id)stringdialog ID切换到某个弹窗(模态弹窗无效)。refresh(id)stringdialog ID刷新某个弹窗。reloadFlag(tabids)string一个或多个标签ID多个ID以,分隔为某(几)个标签设定重载标记(当切换到该标签时重新载入)。reload(options)object同dialog默认参数重新载入某个弹窗如果未指定ID则默认重载入当前弹窗。close(id)stringdialog ID关闭某个弹窗。closeCurrent()----关闭当前弹窗。方法使用示例 // 刷新ID为 dialog-test-1 的Dialog
BJUI.dialog(refresh, dialog-test-1)alertmsg信息提示 alertmsg是B-JUI的信息提示组件共有信息、成功、警告、错误、确认、输入提示几种类型。 使用 通过data属性 button typebutton classbtn-default data-togglealertmsg data-options{type:info, msg:我是一个普通的信息提示}信息提示/button通过JS API BJUI.alertmsg(ok, 我是一个成功的消息提示, {okCall: function() {BJUI.alertmsg(info, 你点击了确定按钮)}
})参数 名称类型默认值描述typestringnull[必选] 信息提示方式参数有[ok | correct | info | warn | error | confirm | prompt ]其中ok为correct的别名confirm为确认提示prompt为输入信息提示。msgstringnull[必选] 提示的内容。displayPositionstringtopcenter[可选] 提示框显示位置参数有[topleft | topcenter | topright | middleleft | middlecenter | middleright | bottomleft | bottomcenter | bottomright]本参数可以覆盖全局设置。displayModestringslide[可选] 提示框显示动画(无动画、渐显渐隐、滑动)参数[none | fade | slide]本参数可以覆盖全局设置。autoClosebooleannull[可选] 是否自动关闭提示框默认在type为[ok | correct | info]三种方式时参数值为true。alertTimeoutintnull[可选] 自动关闭提示框的时间(毫秒)autoClose参数为true时生效本参数可以覆盖全局设置。maskbooleannull[可选] 是否模态显示提示框默认在type为[warn | error | confirm | prompt]方式时参数值为true。titlestring见bjui-regional.zh-CN.js中alertmsg[可选] 信息提示框的标题设置本参数将会覆盖bjui-regional.zh-CN.js中alertmsg的对应设置。okNamestring确定[可选] 确定按钮的名称设置本参数将会覆盖bjui-regional.zh-CN.js中alertmsg的对应设置。cancelNamestring取消[可选] 仅type为confirm时有效取消按钮的名称设置本参数将会覆盖bjui-regional.zh-CN.js中alertmsg的对应设置。okCallfunction()null[可选] 确定按钮的回调方法支持字符串类型的方法名该方法会在提示框关闭后被调用。cancelCallfunction()null[可选] 仅type为confirm时有效取消按钮的回调方法支持字符串类型的方法名该方法会在提示框关闭后被调用。promptRequiredstringrequired[可选] 仅type为prompt时有效输入提示框的验证规则。promptnameobjectprompt[可选] 仅type为prompt时有效输入提示框的name属性。promptvalstringnull[可选] 仅type为prompt时有效输入提示框的默认值。promptobjectnull[可选] 仅type为prompt时有效。该参数是点击确定后的ajax提交参数详细参数配置参考bjuiajax的doajax一节。示例{url:ajaxDone.json, type:post, loadingmask:true}。注意如果有自定义okCall参数则该参数无效。 bjuiajax bjuiajax是B-JUI封装的一系列ajax异步请求。 B-JUI消息JSON 当ajax请求时服务端可以仅返回一个消息JSON告知前端框架处理的结果这个JSON的格式如下 {statusCode : 200,message : 处理成功
}消息JSON的参数 JSON的keystatusCode、message可以在框架初始化时通过参数keys更改statusCode的状态值有ok、error、timeout代表成功、失败、超时三种类型可以通过参数statusCode更改。 doajax异步请求 通过data属性使用 button typebutton classbtn-default data-toggledoajax data-options{url:../../json/ajaxDone.json}Data API Ajax提交1/button通过JS API使用 BJUI.ajax(doajax, {url: json/ajax/ajax-test1.json,loadingmask: true,okCallback: function(json, options) {console.log(返回内容\n JSON.stringify(json))}
})参数 名称类型默认值描述urlstringnull[必选] D-Url ajax处理的URLa链接触发时可以将url定义在href属性。typestringPOST[可选] ajax请求方式。dataobjectnull[可选] ajax请求发送到服务器的数据。confirmMsgstringnull[可选] 执行动作前的确认提示。okalertbooleantrue[可选] 请求正常返回后是否弹出相应的信息提示当返回内容不是B-JUI消息JSON时建议关闭。callbackfunction(json)null[可选] 自定义回调函数。okCallbackfunction(json, options)null[可选] 请求成功时的回调函数该函数会覆盖B-JUI默认的成功回调函数函数的options参数即是该doajax的options参数。okAfterCallbackfunction(json, options)null[可选] 请求成功时的回调函数该函数会在B-JUI默认的成功函数后执行函数的options参数即是该doajax的options参数。errCallbackfunction(json, options)null[可选] 请求失败时的回调函数函数的options参数即是该doajax的options参数。failCallbackfunction(msg, options)null[可选] ajax请求出错时的回调函数函数的msg参数是服务端返回的出错信息options参数即是该doajax的options参数。loadingmaskbooleanfalse[可选] ajax请求时是否显示数据加载遮罩。targetselectornull[可选] 数据加载遮罩的父容器值为空时默认是当前Navtab或Dialog。reloadbooleanfalse[可选] 请求返回成功状态后是否重新加载当前target。forwardstringnull[可选] 跳转地址请求返回成功状态后加载forward地址对应的内容到当前target。forwardConfirmbooleanfalse[可选] 请求返回成功状态后是否重新加载当前target。closeCurrentbooleanfalse[可选] 请求返回成功状态后是否关闭当前target(仅navtab或dialog)。tabidstringnull[可选] 请求返回成功状态后需要刷新的navtab的id集合多个id以,分隔。dialogidstringnull[可选] 请求返回成功状态后需要刷新的dialog的id集合多个id以,分隔。dividstringnull[可选] 请求返回成功状态后需要刷新的div(仅限通过doload加载的div)的id集合多个id以,分隔。datagridsstringnull[可选] 请求返回成功状态后需要刷新的datagrid的id集合多个id以,分隔。gridrefreshflagbooleantrue[可选] 刷新datagrid时保留其快速筛选、排序、分页信息。ajaxTimeoutintBJUI.ajaxTimeout[可选] 请求超时设置即$.ajax的timeout属性。 请求返回成功状态 指服务端返回B-JUI的消息JSON并在json[BJUI.keys.statusCode] BJUI.statusCode.ok时有效。 ajaxform异步表单提交 通过data属性使用带验证 form action../../json/ajaxDone.json data-toggleajaxformh5Data API Ajax提交表单1带验证/h5div classbjui-row col-2label classrow-label姓名/labeldiv classrow-inputinput typetext nameusername data-rulerequired/divlabel classrow-label住址/labeldiv classrow-inputinput typetext nameaddress data-rulerequired/div/divhr stylemargin:5px 0 15px;div classtext-centerbutton typesubmit classbtn-default提交表单/button/div
/form通过JS API属性使用无验证 BJUI.ajax(ajaxform, {url: json/ajax/ajax-test1.json,form: $.CurrentNavtab.find(form:eq(1)),validate: false,loadingmask: true,okCallback: function(json, options) {console.log(返回内容1\n JSON.stringify(json))}
})参数 名称类型默认值描述urlstringnull[必选] 提交的URL未指定时将取form的action属性。typestringPOST[可选] ajax请求方式未指定该参数时会取form的method属性值。confirmMsgstringnull[可选] 提交表单前的确认提示。beforeSubmitfunction(form)null[可选] 执行动作前的确认函数返回false时不提交表单。validate1.31booleantrue[可选] 提交表单前是否需要验证需要验证插件nicevalidate支持。alertmsgbooleanfalse[可选] 是否弹出验证未通过的信息提示。okalertbooleantrue[可选] 请求正常返回后是否弹出相应的信息提示。callbackfunction(json)null[可选] 自定义回调函数。okCallbackfunction(json, options)null[可选] 请求成功时的回调函数该函数会覆盖B-JUI默认的成功回调函数函数的options参数即是该doajax的options参数。okAfterCallbackfunction(json, options)null[可选] 请求成功时的回调函数该函数会在B-JUI默认的成功函数后执行函数的options参数即是该doajax的options参数。errCallbackfunction(json, options)null[可选] 请求失败时的回调函数函数的options参数即是该doajax的options参数。failCallbackfunction(msg, options)null[可选] ajax请求出错时的回调函数函数的msg参数是服务端返回的出错信息options参数即是该doajax的options参数。formselectornull[可选] 要提交的表单通过JS API使用时需要。loadingmaskbooleantrue[可选] ajax请求时是否显示数据加载遮罩。targetselectornull[可选] 数据加载遮罩的父容器值为空时默认是当前Navtab或Dialog。reloadbooleanfalse[可选] 请求返回成功状态后是否重新加载当前target。forwardstringnull[可选] 跳转地址请求返回成功状态后加载forward地址对应的内容到当前target。forwardConfirmbooleanfalse[可选] 请求返回成功状态后是否重新加载当前target。closeCurrentbooleanfalse[可选] 请求返回成功状态后是否关闭当前target(仅navtab或dialog)。tabidstringnull[可选] 请求返回成功状态后需要刷新的navtab的id集合多个id以,分隔。dialogidstringnull[可选] 请求返回成功状态后需要刷新的dialog的id集合多个id以,分隔。dividstringnull[可选] 请求返回成功状态后需要刷新的div(仅限通过doload加载的div)的id集合多个id以,分隔。datagridsstringnull[可选] 请求返回成功状态后需要刷新的datagrid的id集合多个id以,分隔。gridrefreshflagbooleantrue[可选] 刷新datagrid时保留其快速筛选、排序、分页信息。ajaxTimeoutintBJUI.ajaxTimeout[可选] 请求超时设置即$.ajax的timeout属性。 请求返回成功状态 指服务端返回B-JUI的消息JSON并在json[BJUI.keys.statusCode] BJUI.statusCode.ok时有效。 doload异步加载 通过Data属性使用 button typebutton classbtn-default data-toggleajaxload data-options{url:../../html/base/ajax_layout1.html, target:#ajaxload_test_box}Data API Ajax载入/button通过JS API使用 BJUI.ajax(doload, {url: html/base/ajax_layout1.html,target: #ajaxload_test_box
})参数 名称类型默认值描述targetselectornull[必选] 目标容器的 jQuery选择器表达式 或 DOM对象。urlstringnull[必选] D-Url 远程加载的URLa链接触发时可以将url定义在href属性。typestringGET[可选] ajax请求方式。dataobjectnull[可选] ajax请求发送到服务器的数据。autorefreshboolean/int(秒)null[必选] 指定该div容器是否可自动刷新为true时默认间隔15秒自动刷新指定具体的秒数则以指定的间隔秒值自动刷新。callbackfunction(json)null[可选] 加载成功后的回调函数。loadingmaskbooleantrue[可选] ajax请求时是否显示数据加载遮罩。ajaxTimeoutintBJUI.ajaxTimeout[可选] 请求超时设置即$.ajax的timeout属性。方法 方法名参数类型参数说明描述refreshdiv(id)string一个或多个div容器ID多个ID以,分隔刷新指定id的div容器。refreshlayout(target)selector目标容器的 jQuery选择器表达式 或 DOM对象刷新指定的div容器。reloadlayout(options)object同doload的默认参数重新载入某个div容器。方法使用示例 // 重新加载 #ajaxload_test_box 容器
BJUI.ajax(reloadlayout, {target:#ajaxload_test_box, url:html/base/ajax_layout2.html})ajaxdownload异步下载 通过Data属性使用 button typebutton classbtn-default data-toggleajaxdownload data-options{url:../ajaxdownload?t1}ajax下载/button通过JS API使用 BJUI.ajax(ajaxdownload, {url:../ajaxdownload?t1,loadingmask: true
})参数 名称类型默认值描述urlstringnull[必选] D-Url 下载的URL。typestringGET[可选] ajax请求方式。dataobjectnull[可选] 发送到服务器的数据。targetselectornull[可选] 数据加载遮罩的父容器值为空时默认是当前Navtab或Dialog。loadingmaskbooleanfalse[可选] ajax请求时是否显示数据加载遮罩。confirmMsgstringnull[可选] 下载前的确认提示。failCallbackfunction(responseHtml, url)B-JUI框架提示及取消loadingmask遮罩效果。[可选] ajax请求失败时的回调函数。prepareCallbackfunction(url)根据loadingmask参数加载遮罩。[可选] ajax请求中的回调函数。successCallbackfunction(url)取消loadingmask遮罩效果。[可选] ajax请求成功的回调函数。 ajaxdownload说明 需要依赖插件$.fileDownload。 ajaxsearch搜索表单1.31 通过data属性使用不验证 form action../../html/base/ajax.html data-toggleajaxsearch data-options{validate:false}h5Ajax表单搜索重载当前navtab不验证/h5div classbjui-row col-2label classrow-label姓名/labeldiv classrow-inputinput typetext nameusername data-rulerequired/divlabel classrow-label住址/labeldiv classrow-inputinput typetext nameaddress data-rulerequired/div/divhr stylemargin:5px 0 15px;div classtext-centerbutton typesubmit classbtn-default搜索表单/button/div
/form通过JS API属性使用带验证 BJUI.ajax(ajaxsearch, {url: ../../html/base/ajax.html,form: $.CurrentNavtab.find(form:eq(1)),validate: true,loadingmask: true
})参数 名称类型默认值描述urlstringnull[必选] 提交的URL未指定时将取form的action属性。typestringPOST[可选] ajax请求方式未指定该参数时会取form的method属性值。beforeSubmitfunction(form)null[可选] 执行动作前的确认函数返回false时不提交表单。validatebooleantrue[可选] 提交表单前是否需要验证需要验证插件nicevalidate支持。alertmsgbooleanfalse[可选] 是否弹出验证未通过的信息提示。searchDatagridselectornull[可选] 将form域中的信息用来搜索指定datagrid如果有该参数则参数okalert之后的参数都无效。formselectornull[可选] 要提交的表单通过JS API使用时需要。loadingmaskbooleantrue[可选] ajax请求时是否显示数据加载遮罩。targetselectornull[可选] 数据加载遮罩的父容器值为空时默认是当前Navtab或Dialog。okalertbooleantrue[可选] 请求正常返回后是否弹出相应的信息提示。callbackfunction(json)null[可选] 自定义回调函数。okCallbackfunction(json, options)null[可选] 请求成功时的回调函数该函数会覆盖B-JUI默认的成功回调函数函数的options参数即是该doajax的options参数。okAfterCallbackfunction(json, options)null[可选] 请求成功时的回调函数该函数会在B-JUI默认的成功函数后执行函数的options参数即是该doajax的options参数。errCallbackfunction(json, options)null[可选] 请求失败时的回调函数函数的options参数即是该doajax的options参数。failCallbackfunction(msg, options)null[可选] ajax请求出错时的回调函数函数的msg参数是服务端返回的出错信息options参数即是该doajax的options参数。reloadbooleanfalse[可选] 请求返回成功状态后是否重新加载当前target。forwardstringnull[可选] 跳转地址请求返回成功状态后加载forward地址对应的内容到当前target。forwardConfirmbooleanfalse[可选] 请求返回成功状态后是否重新加载当前target。closeCurrentbooleanfalse[可选] 请求返回成功状态后是否关闭当前target(仅navtab或dialog)。tabidstringnull[可选] 请求返回成功状态后需要刷新的navtab的id集合多个id以,分隔。dialogidstringnull[可选] 请求返回成功状态后需要刷新的dialog的id集合多个id以,分隔。dividstringnull[可选] 请求返回成功状态后需要刷新的div(仅限通过doload加载的div)的id集合多个id以,分隔。datagridsstringnull[可选] 请求返回成功状态后需要刷新的datagrid的id集合多个id以,分隔。gridrefreshflagbooleantrue[可选] 刷新datagrid时保留其快速筛选、排序、分页信息。ajaxTimeoutintBJUI.ajaxTimeout[可选] 请求超时设置即$.ajax的timeout属性。 请求返回成功状态 指服务端返回B-JUI的消息JSON并在json[BJUI.keys.statusCode] BJUI.statusCode.ok时有效。 Datagrid Datagrid即数据表格是B-JUI的重要组成部分。 使用 通过data属性 table classtable table-bordered data-toggledatagrid data-options{dataUrl: ../../json/datagrid-test.json
}theadtrth data-options{name:name,align:center,width:70}名称/thth data-options{name:desc}aligncenter描述/thth data-options{name:beizhu}备注/thth data-options{name:createtime,align:center,type:date,pattern:yyyy-MM-dd HH:mm:ss}创建时间/th/tr/thead
/table通过JS API $(#test-datagrid).datagrid({dataUrl: ../../json/datagrid-test.json,columns: [{name:name,label:名称,align:center,width:70},{name:desc,label:描述},{name:beizhu,label:备注},{name:createtime,label:创建时间,align:center,type:date,pattern:yyyy-MM-dd HH:mm:ss}]
})参数 名称类型默认值描述gridTitlestringnull[可选] 标题。columnsarraynull[可选] 表头模型适用动态生成表头如果未设置本参数将自动转化静态表头为模型。详细请查看columns参数dataarraynull[可选] 提供datagrid需要的数据如果同时设置有dataUrl参数本参数优先级高。dataUrlstringnull[可选] Ajax请求数据的URL。返回数据模板: JSON:{totalRow:50, pageCurrent:1, list:[{name:孙悟空,sex:true}, {name:美国队长, true}]} Array:{totalRow:50, pageCurrent:1, list:[[孙悟空,true], [美国队长, true]]}注意分页参数totalRow、pageCurrent、pageSize的key值引用的框架初始化时的pageInfo配置。postDataobject{}[可选] ajax请求发送到服务器的数据。loadTypestringPOST[可选] Ajax请求方式。dataTypestringjson[可选] 数据类型可选参数[json | array | xml]。hiddenFieldsarraynull[可选] dataTypearray有效隐藏字段可以将不能加载到页面上的值设置到给定的字段array数据除去表头的列后依次赋值。localstringremote[可选] 处理数据方式可选参数[local | remote](影响分页、排序、筛选)。fieldSortablebooleantrue[可选] 点击页头字段快速排序。普通表格转为datagrid的需设置dataUrl参数local remotefilterTheadbooleantrue[可选] 允许表格头部快速筛选。普通表格转为datagrid的需设置dataUrl参数local remotesortAllbooleanfalse[可选] 排序范围true 所有数据排序 false 当前页数据排序。普通表格转为datagrid的默认为truefilterAllbooleanfalse[可选] 筛选范围true 从所有数据中筛选false 从当前页数据中筛选。普通表格转为datagrid的默认为truefilterMultbooleantrue[可选] 支持多字段筛选。initFilterobject{}[可选] 初始化字段筛选。linenumberAllbooleanfalse[可选] 行号范围true 为所有数据编号false 为当前页数据编号。showLinenumberboolean/stringtrue[可选] 是否显示行号参数[true | false | lock]lock参数 锁定行号列适用于多列字段出现横向滚动条的情况。showCheckboxcolboolean/stringfalse[可选] 是否显示行复选框参数同上。showEditbtnscolbooleanfalse[可选] 是否显示编辑按钮列。showToolbarbooleanfalse[可选] 是否显示工具条需要设置参数toolbarItem或toolbarCustom。showNoDataTipboolean/stringtrue[可选] 没有获取到数据时显示的提示信息。可选参数[true | false自定义提示]true 框架默认提示[没有数据], false 不显示。toolbarItemstringnull[可选] 显示工具条按钮可选参数[all, add, edit, cancel, save, del, import, export, exportf, |]“all” 显示所有按钮“|” 按钮组分隔符。toolbarCustomstring/object/functionnull[可选] 自定义的html内容或jQuery DOM对象支持带返回值函数。columnResizebooleantrue[可选] 允许调整列宽。columnMenubooleantrue[可选] 表头字段列上显示菜单按钮。columnShowhidebooleantrue[可选] 表头字段列菜单上出现 “显示/隐藏 列” 选项。columnFilterbooleantrue[可选] 表头字段列菜单上出现 “过滤” 选项。columnLockbooleantrue[可选] 表头字段列菜单上出现 “锁定列、解除锁定” 选项。pagingboolean/objecttrue[可选] 是否显示分页组件可设置分页参数。分页参数模板 {pageSize:30, selectPageSize:30,60,90, pageCurrent:1, showPagenum:5, totalRow:0}如果localremote并通过dataUrl参数请求json数据时返回的数据要提供totalRow、pageCurrent参数可提供pageSize参数 注意分页参数totalRow、pageCurrent、pageSize的key值引用的框架初始化时的pageInfo配置。pagingAlignstringcenter[可选] 分页组件对齐方式参数[left | center | right]keysobject [可选] 提交编辑数据时需要移除的数据key。 1 {gridChild:gridChild,gridNumber:gridNumber,gridCheckbox:gridCheckbox,gridEdit:gridEdit,gridIndex:gridIndex,dropFlag:dropFlag,treePTr:datagrid.tree.parentTr,treePData:datagrid.tree.parentData,childlen:childlen,isExpand:isExpand,isParent:isparent} hasChildbooleanfalse[可选] 是否包含子表。childOptionsobject [可选] 子表参数。 1 {
2 width : 100%, // 子表宽
3 height : auto, // 子表高
4 paging : false, // 子表分页参数
5 columnMenu : false, // 子表列菜单
6 filterThead : false, // 子表表头快速筛选
7 childUpdate : false // 子表改动时是否更新父表数据(需要主表有updateRowUrl参数支持)参数 (Boolean: true | false, true all) OR (String: all, add, edit, del)
8 } isTreebooleanfalse[可选] 是否树型表。treeOptionsobject [可选] 树型表参数。 1 {2 keys : {3 key : id, // id4 parentKey : pid, // 父id5 childKey : children, // 子列表数据key值6 childLen : childlen, // 子列表数据条数7 isParent : isparent, // 是否父数据8 level : level, // 层级9 order : order, // 顺序
10 isExpand : isExpand // 子列表是否展开
11 },
12 simpleData : true, // 是否简单数据(array格式)
13 add : true // 显示添加按钮
14 } dropOptionsobject [可选] 拖动参数。 1 {
2 drop : false, // 拖动开关
3 dropUrl : null, // 拖动结束后发送数据到该url
4 paging : true, // 是否发送分页参数
5 scope : drop, // 发送拖动数据范围drop 被拖动影响的数据all 当前页全部数据
6 beforeDrag : null, // function($tr, data)拖动前方法返回false则不拖动
7 beforeDrop : null, // function(sourceData, descData, position)拖动到目标并放置之前方法返回false则不放置参数分别是(源数据、目标数据、放置位置(append、before、after))
8 afterDrop : POST // string 或 function($descTr, $sourceTr)如果是字符串并有dropUrl参数则发送拖动数据到dropUrl否则执行自定义方法
9 } tdTemplatestring/function(data)null[可选] 格式化表格的数据模板需配合参数templateWidth当检测到窗口宽度小于templateWidth就用tdTemplate模板格式化行数据。模板字符串示例divh1标题{#title}/h1p内容{#content}/p/div使用{#字段key }可以替换当前行数据对应字段值。function示例function(data) {return divh1标题 data.title /h1p内容 data.content /p/div }templateWidthint600[可选] 当表格宽度小于设定值时根据templateWidth参数格式化行数据。当值设为0时1.31始终以自定义模板方式显示。推荐将参数值与参数dialogFilterW设置一致以达到最佳效果。dialogFilterWint360[可选] 当表格宽度小于设定值时将表头的快速筛选更换为dialog模式。当值设为0时1.31表头将固定为dialog模式。editUrlstringnull[可选] 保存编辑、添加数据的urlAjax请求方式为POST服务器端接收的参数名称为json数据类型是JSON Array。editUrl支持行数据动态赋值赋值id的例子{editUrl:news/edit?id{id}}{id}部分会自动替换为该行数据的ID字段值。editCallbackfunction(json)null[可选] 保存成功后的回调返回的json内容可以是B-JUI默认的回调json或保存后的json数据datagrid默认回调如果返回保存后的json数据将会更新对应的数据行。editModestring/objectinline[可选] 编辑、添加数据的方式参数[false | inline | dialog]。false 不能编辑inline 行内编辑dialog 弹窗编辑。自定义dialog方式{dialog:{dialog参数}}自定义navtab方式{navtab:{navtab参数}}editDialogOpobjectnull[可选] 弹窗编辑方式时设置弹出窗口的参数如{width:500, height:300, mask:false}inlineEditMultbooleantrue[可选] 允许行内编辑模式下同时添加/编辑多行。saveAllbooleantrue[可选] 适用于多行行内编辑时一次性保存全部数据发送到服务器端数据格式见参数editUrl。addLocationstringfirst[可选] 添加新行数据于当前页的位置参数[first | last | prev | next]参数prev和next参考当前选中行位置。delUrlstringnull[可选] 删除数据的url服务器端接收的数据见参数delPKdelTypestringPOST[可选] Ajax删除数据的请求方式。delPKstringnull[可选] 设置删除主键名如果设置了主键则只发送该字段的值(删除多条则主键值以逗号分隔)到服务器端否则发送JSON数据参数名json数据类型为JSON Array。delConfirmboolean/stringnull[可选] 删除前的确认提示参数[true | false | 自定义提示信息]参数为false时不弹出提示信息。delCallbackfunction(json)null[可选] 删除成功后的回调函数返回的json内容为B-JUI默认的回调json。jsonPrefixstringnull[可选] 发送到服务器端的json数据(name)加前缀包括(保存、删除、筛选)操作。contextMenuHbooleantrue[可选] 在表头上右键点击时出现 ”显示/隐藏列“ 的快捷菜单。contextMenuBbooleanfalse[可选] 在数据行右键点击时出现快捷菜单菜单选项有(刷新、添加、编辑、取消、删除)。hScrollbarbooleanfalse[可选] 允许出现横向滚动条。widthint/percentnull[可选] datagrid容器宽度默认为父容器的宽相当于100%。tableWidthint/percentnull[可选] 表格的宽度默认是各列宽度之和。heightint/percent300[可选] datagrid容器高度。importOptionobjectnull[可选] 工具栏的导入按钮参数dialog或navtab方式打开导入页面参数模板{type:dialog, options:{url:, width:400, height:200}}exportOptionobjectnull[可选] 工具栏的导出按钮参数执行ajax url或以dialog or navtab方式打开导出页面参数模板{type:ajax, options:{url:}}beforeEditfunctionnull[可选] 带返回值方法编辑数据前调用返回true继续编辑返回false取消编辑。beforeDeletefunctionnull[可选] 带返回值方法删除数据前调用返回true继续删除返回false取消删除。afterSavefunction($trs, datas)null[可选] 保存成功后执行方法参数$trs为保存行(jQuery 对象)datas为保存行对应数据(JSON Array)。afterDeletefunctionnull[可选] 删除成功后执行方法。columns参数 名称类型默认值描述namestringnull[可选] 该列字段名(关联json数据、xml数据、编辑及保存的数据)。未设置name将不能进行添加\编辑\快速筛选\排序等操作labelstringnull[可选] 显示的列标题。widthintauto[可选] 列宽。alignstringleft[可选] 对齐方式(left、center、right)。typestringstring[可选] 数据类型(string、boolean、select、textarea、date、findgrid、spinner、tags)。alignstringleft[可选] 对齐方式(left、center、right)。addbooleantrue[可选] 允许该列添加数据。editbooleantrue[可选] 允许该列编辑数据。attrsobjectnull[可选] 编辑时表单域的附加参数。示例{readonly:readonly}rulestringnull[可选] 编辑时表单域名的验证规则。示例required;length(6)itemsarray/functionnull[可选] 用于数据渲染或筛选\编辑时的select填充。array示例[{true:男}, {false:女}],array示例21.31[{sex:true, name:男}, {sex:false, name:女}]需配合参数itemattr使用function示例function() {return $.getJSON(/datagrid/demo-items-state.js)}itemattr1.31objectnull[可选] 用于正确获取items参数的内容。如items的array示例2本参数设置为{value:sex,label:name}renderfunction(value, data)null[可选] 将列数据渲染成其他样式方法参数value为datagrid数据提供的原始值。组合显示示例function(value, data){return value ( data.name )}datagrid提供基于items的默认渲染$.datagrid.renderItempatternstringnull[可选] 配合typedate使用设置日期格式。示例yyyy-MM-dd HH:mmhidebooleanfalse[可选] 是否隐藏该列。menubooleantrue[可选] 列上是否出现菜单按钮如果是多表头仅对字段列有效。lockbooleanfalse[可选] 是否锁定该列(尽量不用影响速度)。quicksortbooleantrue[可选] 允许点击该列进行快速排序。quickfilterbooleantrue[可选] 允许该列进行表头快速筛选。finalWidthbooleanfalse[可选] 固定该列的宽度不受内容多少变更宽度。方法 方法名参数类型参数说明描述refresh(filterFlag)booleantrue 保留筛选、排序、分页数据false 不保留刷新重新加载数据。reload(options)object同datagrid的options重载使用新的options对应覆盖旧的options生成一个新的datagrid如果新的options有参数columns将会直接替换旧的columns。filter(data)1.31object需要筛选的数据快速筛选以新提供的数据覆盖postData参数重新向服务端请求数据可以通过data提供boolean参数clearOldPostData使框架保留或取消原有的postData参数。筛选name示例$().datagrid(filter, {name:张三})refreshParent(filterFlag)booleantrue 保留父表的筛选、排序、分页数据false 不保留刷新父表数据有父表数据时使用有效。refreshChild(row, filterFlag)int/string/object, boolean单个数据行的索引、逗号分隔的行索引字符串、数据行的jQuery对象filterFlag{true 保留子表的筛选、排序、分页数据false 不保留}刷新子表数据有子表数据时使用有效。showChild(row, flag, func)int/string/object, boolean, function($childTable)单个数据行的索引、逗号分隔的行索引字符串、数据行的jQuery对象flag{true 显示false 隐藏}func是显示或隐藏子表后的回调函数。显示/隐藏指定数据行的子表。updateRow(row, [updateData])int/string/object, object单个数据行的索引、逗号分隔的行索引字符串、数据行的jQuery对象updateData是需要更新的JSON数据。更新指定数据行的数据。未指定参数updateData时如果datagrid定义有updateRowUrl参数则通过ajax获取对应的数据。doAjaxRow(row, opts)int/string/object, object单个数据行的索引、逗号分隔的行索引字符串、数据行的jQuery对象opts是doajax的相应参数。指定数据行执行ajax操作opts的url参数支持当前行数据动态赋值如{url:doajax?id{id}}{id}部分会自动替换为该行数据的ID字段值。如果opts未定义callback或okcallback参数datagrid会执行updateRow(json)操作。expand(row, expandFlag)int/string/object, boolean单个数据行的索引、逗号分隔的行索引字符串、数据行的jQuery对象expandFlag{true 展开false 折叠}。(仅适用于树表)展开/折叠子节点。showLinenumber(flag)boolean/stringtrue | false lock | unlock行号列显示、隐藏、锁定、解除锁定。showCheckboxcol(flag)boolean/stringtrue | false lock | unlock复选框列显示、隐藏、锁定、解除锁定。showEditCol(tabids)booleantrue | false编辑按钮列显示、隐藏。showhideColumn(column, showFlag)object/int, booleancolumn 列索引或字段列的jQuery对象showFlag true/false显示、隐藏某列。selectedRows(rows, [selected])int/string/object, [boolean]单个数据行的索引、逗号分隔的行索引字符串、数据行的jQuery对象[可选参数选中|取消选中默认选中]选中/取消选中行。externalEdit(row, editOpts)int/object, object 参数单个数据行的索引、数据行的jQuery对象编辑参数(navtab或dialog) 自定义编辑如果编辑url同datagrid的editUrl参数则可以省略editOpts的url参数url参数支持行数据动态替换。示例 1 $(#j_datagrid).datagrid(externalEdit, 2, {
2 dialog: {
3 url: html/form/form.html?id{id},
4 width: 500,
5 height: 400,
6 title: 编辑
7 }
8 }) add(addLocation)stringfirst | last | prev | next添加行参数参考datagrid参数addLocation。doEditRow(row)object/int数据行的jQuery对象或行索引。编辑行。doCancelEditRow(row)object/int数据行的jQuery对象或行索引。取消编辑行。doSaveEditRow(row)object/int数据行的jQuery对象或行索引。保存编辑行。delRows(rows)int/string/object单个数据行的索引、逗号分隔的行索引字符串、数据行的jQuery对象删除行。saveAll()----保存所有编辑行。jumpPage(pageNum, [pageSize])int, int跳转页码(仅设置分页大小参数时可设为null)[可选参数页大小]跳转到指定页码。destroy()----销毁datagrid。获取数据 示例获取数据格式描述$(table).data(filterDatas)objectdatagrid参数{local:remote}时有效。取得筛选数据包含快速筛选、页码、排序信息。$(table).data(selectedDatas)array取得选中行数据。$(table).data(selectedTrs)jQuery Object取得选中行的jQuery对象。$(table).data(allData)array取得当前(页/所有)数据。datagrid参数{local:remote}时取得当前页数据否则取得所有数据。 Findgrid Findgrid是一个dialog datagrid的组合组件它可以将datagrid的数据赋值到相应的表单域或执行自定义的操作。 使用 通过data属性 input idfindgrid1 typetext nameobj.xm value data-togglefindgrid data-options{group: obj,include: xm:name, description:desc,dialogOptions: {title:查找职业},gridOptions: {local: local,dataUrl: ../../json/datagrid/profession.json,columns: [{name:name, label:名称, width:100},{name:desc, label:描述},{name:date, label:创建日期}]}
} placeholder点放大镜按钮查找通过JS API BJUI.findgrid({group: obj,include: name3:name, description:desc,dialogOptions: {title:查找职业},gridOptions: {local: local,dataUrl: ../../json/datagrid/profession.json,columns: [{name:name, label:名称, width:100},{name:desc, label:描述},{name:date, label:创建日期}]}
})参数 名称类型默认值描述pkstringnull[可选] 行数据的主键值当打开Findgrid窗口时用来标记已选中项。oldDatastring/arraynull[可选] 对应pk参数的值参数multipletrue时多个值以逗号分隔或提供array格式。groupstringnull[可选] 选中后要赋值input的name前缀如text的name为obj.name那么group就是obj。suffixstringnull[可选] 选中后要赋值input的name后缀如text的name为obj.name[]那么suffix就是[]。includestringnull[可选] 要赋值的input名称集合多个以逗号,分隔。举例如果有一堆表单域的name分别为obj.name, obj.sex, obj.age如果只需要填充name和sex那include就是name,sex如果name对应的数据行的key是xm那可以写作name:xm,sex冒号前面是input的name即将datagrid选中行的xm字段值赋值到obj.name域。excludestringnull[可选] 与include相反排除要赋值的input名称集合。注意如果已设置include参数则本参数无效。multiplebooleanfalse[可选] 是否开启多行选择。appendbooleanfalse[可选] 多选时的赋值模式true 追加会有重复值false 替换。emptybooleantrue[可选] 是否在Findgrid窗口上显示清空按钮。dialogOptionsobject{id:null,mask:true,width:600,height:400,title:Findgrid,maxable:true,resizable:true}[可选] Findgrid弹窗参数请参考dialog参数设置。gridOptionsobject{width:100%,height:100%,tableWidth:100%,columnMenu:false}[必选] 请参考datagrid参数。contextselector当前dialog或navtab[可选] 仅在指定的容器中查找待赋值input。beforeSelectfunction(data)null[可选] 选中数据行时的事件回调函数返回booleantrue 继续执行false 取消赋值。onSelectfunction(data)null[可选] 该函数用于替换Findgrid默认的赋值操作data参数为选中行数据单选时类型为object多选时为array。afterSelectfunction(data)null[可选] Findgrid的赋值操作完成后的回调函数。 分页组件1.31 分页组件Pagination当触发页面跳转时可以自定义回调函数或通过指定的form提交相应参数到服务端处理。 使用 通过data属性使用 ul idpagination_test_ul1/ul
div data-togglepagination data-options{total:1000, pageSize:5, callback:pagination_test_callback}/div
function pagination_test_callback(pageCurrent, pageSize) {BJUI.ajax(doajax, {url: http://b-jui.com/demo?callback?,data: {pageCurrent:pageCurrent, pageSize:pageSize},dataType: jsonp,okCallback: function(json) {var lis BJUI.StrBuilder()$.each(json.list, function(i, n) {lis.add(li).add(n.code).add( - ).add(n.deptname).add( - ).add(n.name).add( - ).add(n.sex ? 男 : 女).add(/li)})$(#pagination_test_ul1).html(lis.toString())}})
}通过JS API属性使用 div idtest_pagination/div
$(#test_pagination).pagination({width: 50%,total:1000, pageSize:5, form:#pagination_test_searchform
})参数 名称类型默认值描述widthint/percent100%[可选] 分页组件的宽度。pageSizeint30[可选] 页码大小。selectPageSizestring30,60,90[可选] 可供选择的页码大小集合。pageCurrentint1[可选] 当前页码。totalint0[可选] 总记录数。showPagenumint5[可选] 可供点击的页码个数。formselectornull[可选] 触发页码跳转时向该form写入pageCurrent及pageSize参数并提交该form。callbackfunction(pageCurrent, pageSize)null[可选] 触发页码跳转时执行该回调函数。注意参数callback的优先级比form高。 分页相关参数 分页参数total、pageCurrent、pageSize的key值引用的框架初始化时的pageInfo配置。 方法 方法名参数类型参数说明描述jumpPage(pageCurrent, [pageSize])int, [int]跳转页码[页记录数]跳转到某个页面可以改变现有页面记录数。destroy()----销毁分页组件。方法使用示例 $(#test_pagination).pagination(jumpPage, 12)最新版本 版本号下载地址最后更新v1.31点我下载2016/11/01历史版本 版本号下载地址最后更新v1.3点我下载2016/10/21v1.3 beta2点我下载2016/01/06v1.3.beta点我下载2015/12/31v1.2点我下载2015/05/22 转载于:https://www.cnblogs.com/jiathis/p/9550787.html
