B-JUI文档、下载
生活随笔
收集整理的這篇文章主要介紹了
B-JUI文档、下载
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
概述
特別說明
本文檔僅適用于最新版的B-JUI，網站首頁或下載頁可以查看B-JUI的最后更新時間。
B-JUI前端管理框架適用于快速開發(fā)各類WEB管理系統(tǒng)，可與任意后端程序（java、php、.net...）配合使用。
B-JUI基于Bootstrap樣式及jQuery庫開發(fā)，目前有各類常用組件，已集成部分常用插件，可以很的方便引入第三方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 class="bjui-pageHeader"><!-- 頂部模塊[如：功能按鈕、搜索面板] --> </div><div class="bjui-pageContent"><!-- 內容區(qū) --> </div><div class="bjui-pageFooter"><!-- 底部模塊[如：操作按鈕] --> </div>子頁面主要用于創(chuàng)建?navtab?、?dialog?頁面。
初始化框架
BJUI.init(options)options參數(shù)請參考下載目錄中的?index.html?文件。
DOM元素ID命名規(guī)范
因為本框架默認所有內容都位于一個Document中，所以為元素命名ID的時候需要做到唯一性，如果確實不可避免的會出現(xiàn)有重復ID的現(xiàn)象，需要操作當前子頁面的元素時，盡量用：
$.CurrentNavtab.find('#dom-id')?，在當前標簽工作區(qū)中查找指定ID的元素。
或?$.CurrentDialog.find('#dom-id')?，在當前彈窗中查找指定ID的元素。
全局事件
B-JUI的全局事件如下：
| bjui.initUI | 框架初始化事件 | 監(jiān)聽該事件，可以為指定的DOM初始化框架組件及插件，例如：本框架監(jiān)聽該事件用于在文檔加載完成或ajax加載完成時，初始化框架及插件 |
| bjui.beforeInitUI | 框架初始化前事件 | 監(jiān)聽該事件，可以在框架初始化前進行相關操作。例如：本框架的任一容器DOM如果添加了屬性['data-noinit="true"]，該容器內的元素都不會被初始化，處理這個流程就監(jiān)聽了本件事。 |
| bjui.afterInitUI | 框架初始化后事件 | 監(jiān)聽該事件，可以在框架初始化后進行相關操作，示例同上。 |
| bjui.ajaxStatus | ajax請求狀態(tài)事件 | 框架內部事件。本事件用于在ajax請求過程中（ajaxStart - > ajaxStop），顯示/隱藏 框架的Mask loading效果。 |
| bjui.resizeGrid | 窗口縮放事件 | 監(jiān)聽該事件，可在瀏覽器窗口或dialog窗口縮放時進行相關操作。 |
| bjui.beforeAjaxLoad | ajax載入前事件 | 監(jiān)聽該事件，可在使用ajaxUrl方法?(navtab/dialog均用此方法加載子頁片內容)?前進行相關操作，例如：本框架監(jiān)聽該事件用于在重載入子頁片前釋放在body中生成的selectpicker插件資源。 |
下面是一個事件示例，來自DEMO中，作用是代碼片斷著色及添加COPY按鈕：
$(document).on(BJUI.eventType.afterInitUI, function(event) {$(event.target).find('.highlight').each(function(){var b='<div class="zero-clipboard"><span class="btn-clipboard">Copy</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 type="button" class="btn-default" data-toggle="alertmsg" data-options="{type:'info', msg:'我是一個普通的信息提示！'}">信息提示</button>javascript API
除了data屬性之外，也提供 javascript 的 API，如下面的代碼將實現(xiàn)同上面data屬性一致的效果。
<button type="button" class="btn-default" οnclick="alertmsg_onclick();">信息提示</button> <script type="text/javascript"> function alertmsg_onclick() {BJUI.alertmsg('info', '我是一個普通的信息提示！') } </script>?
url動態(tài)賦值
URL動態(tài)賦值：指的是url中包含{ selector }，即大括號括起來的jQuery選擇器，當提交該url時，框架會自動將selector對應元素的值替換到大括號所占區(qū)域。
后面的文檔中，凡是標記有?D-Url?字樣的URL參數(shù)，均支持動態(tài)賦值，通常支持動態(tài)賦值的url，同時支持warn參數(shù)，warn參數(shù)攜帶動態(tài)賦值不成功時的提示信息。
字符串函數(shù)等
| $(form).serializeJson() | -- | json | 將表單域內容轉換為json格式。 |
| $(selector).isTag(tagName) | html元素名稱 | boolean | 判斷當前jQuery對象的標簽名是否為tagName。示例：if ($('#test-aa').isTag('a')) {alert('我是一個a鏈接！')} |
| string.isPositiveInteger() | -- | boolean | 判斷字符串是否是正整數(shù)。示例：var aa = '112233'; alert(aa.isPositiveInteger()) |
| string.isInteger() | -- | boolean | 判斷字符串是否是整數(shù)。示例：var aa = '-112233'; alert(aa.isInteger()) |
| string.isNumber() | -- | boolean | 判斷字符串是否是數(shù)字。示例：var aa = '112.233'; alert(aa.isNumber()) |
| string.isNormalID() | -- | boolean | 判斷字符串是以字母開頭，并由數(shù)字、字母、中橫線、下劃線組成。示例：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 | 判斷字符串是否是正整數(shù)。示例：var aa = '112233'; alert(aa.isPositiveInteger()) |
| string.encodeTXT() | -- | string | 轉義html字符串。示例： Copy |
| string.trans() | -- | string | 還原已轉義的html字符串。示例：var html = '<p>我是一行數(shù)據(jù)！</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對象下的字符串函數(shù)名轉換，示例2：window.testfunc = function() { alert('我是一個window方法！') }; var aa = 'testfunc'.toFunc(); if (typeof aa === 'function') {aa.apply()} |
Navtab
通過頁面結構圖可以看出Navtab是B-JUI框架的重要組成部分，除去頂部導航及側邊欄后就是Navtab。Navtab采用標簽形式顯示多個子頁面，按住標簽不放可以拖動排序，在標簽上右鍵可以刷新或關閉標簽。使用
通過data屬性：
<button type="button" class="btn-default" data-toggle="navtab" 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' })參數(shù)
| id | string | undefined | [必選] 標簽的ID，如果指定重復，將覆蓋現(xiàn)有的ID相同標簽。 |
| title | string | New tab | [可選] 標簽打開后顯示的名稱。 |
| url | string | undefined | [必選]?D-Url?請求數(shù)據(jù)的url，a鏈接觸發(fā)時可以將url定義在href屬性。 |
| external | boolean | false | [可選] 是否以iframe方式加載外部頁面。 |
| type | string | GET | [可選] Http請求方式，可選‘GET/POST’。 |
| data | object | {} | [可選] 請求url時，需要發(fā)送的data數(shù)據(jù)。 |
| loadingmask | boolean | true | [可選] ajax請求時是否顯示數(shù)據(jù)加載遮罩。 |
| fresh | boolean | false | [可選] 是否保持該navtab的新生狀態(tài)，表現(xiàn)在重復打開該navtab時，是否重新載入內容。 |
| reloadWarn | string | null | [可選] 當準備在已存在的navtab上加載內容時的確認提示信息。 |
| autorefresh | boolean/int(秒) | false | [可選] 指定該navtab是否可自動刷新，為true時默認間隔15秒自動刷新，指定具體的秒數(shù)則以指定的間隔秒值自動刷新。 |
| onLoad | function($navtab) | null | [可選] navtab加載完成后的事件回調，回調函數(shù)的參數(shù)$navtab為該navtab內容區(qū)的jQuery對象。 |
| beforeClose | function($navtab) | null | [可選]?返回值: boolean。 navtab關閉前的事件回調，返回true則關閉，返回false不關閉。 |
| onClose | function() | null | [可選] navtab關閉后的事件回調。 |
方法
| switchTab(tabid) | string | 標簽ID | 切換到某個標簽。 |
| refresh(tabid) | string | 標簽ID，ID為空則刷新當前標簽 | 刷新某個標簽。 |
| reloadFlag(tabids) | string | 一個或多個標簽ID，多個ID以,分隔 | 為某(幾)個標簽設定重載標記(當切換到該標簽時重新載入)。 |
| reload(options) | object | 同navtab默認參數(shù) | 重新載入某個標簽，如果未指定ID，則默認重載入當前標簽。 |
| closeTab(tabid) | string | 標簽ID | 關閉某個標簽。 |
| closeCurrentTab([tabid]) | string | 標簽ID，可選。 | 關閉當前標簽。 |
| closeAllTab() | -- | -- | 關閉所有標簽。 |
方法使用示例：
// 刷新ID為 navtab-test-1 的Navtab BJUI.navtab('refresh', 'navtab-test-1')Dialog
Dialog是浮動在主頁面上的彈出窗口，分為普通彈窗和模態(tài)彈窗。Dialog是B-JUI的重要組成部分，可以進行最大化，最小化，拖動大小和位置等操作。
使用
通過data屬性：
<button type="button" class="btn-default" data-toggle="dialog" 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' })參數(shù)
| id | string | dialog | [必選] 彈窗的ID，如果指定重復，將覆蓋現(xiàn)有的ID相同彈窗。 |
| title | string | New Dialog | [可選] 彈窗打開后顯示的名稱，可從data-title屬性獲取或直接獲取觸發(fā)DOM的text值。 |
| url | string | undefined | [可選] 參數(shù)url、image、html、target必選一項，優(yōu)先級url > image > html > target。?D-Url?請求數(shù)據(jù)的url，a鏈接觸發(fā)時可以將url定義在href屬性。 |
| image | string | null | [可選] 圖片地址，讓dialog顯示該圖片，image參數(shù)可以使用encodeURI函數(shù)編碼。 |
| html | string | null | [可選] 指定一段html內容加載到dialog。 |
| target | selector | null | [可選] 從指定的jQuery容器中加載內容到dialog，請為該容器添加屬性data-noinit="true"以阻止容器中的內容提前初始化，為容器添加Class[hide]以隱藏待加載內容。 |
| type | string | GET | [可選] Http請求方式，可選‘GET/POST’。 |
| data | object | {} | [可選] 請求url時，需要發(fā)送的data數(shù)據(jù)。 |
| loadingmask | boolean | true | [可選] ajax請求時是否顯示數(shù)據(jù)加載遮罩。 |
| width | int | 500 | [可選] 彈窗的寬度。 |
| height | int | 300 | [可選] 彈窗的高度。 |
| max | boolean | false | [可選] 打開彈窗時直接最大化。 |
| mask | boolean | false | [可選] 是否模態(tài)窗口。 |
| resizable | boolean | true | [可選] 可以調整彈窗的大小。 |
| drawable | boolean | true | [可選] 可以拖動彈窗。 |
| maxable | boolean | true | [可選] 是否顯示最大化按鈕。 |
| minable | boolean | true | [可選] 是否顯示最小化按鈕（模態(tài)彈窗無效）。 |
| fresh | boolean | false | [可選] 是否保持該dialog的新生狀態(tài)，表現(xiàn)在重復打開該dialog時，是否重新載入內容。 |
| reloadWarn | string | null | [可選] 當準備在已存在的dialog上加載內容時的確認提示信息。 |
| onLoad | function($dialog) | null | [可選] dialog加載完成后的事件回調，回調函數(shù)的參數(shù)$dialog為該dialog的jQuery對象。 |
| beforeClose | function($dialog) | null | [可選]?返回值: boolean。 dialog關閉前的事件回調，返回true則關閉，返回false不關閉。 |
| onClose | function() | null | [可選] dialog關閉后的事件回調。 |
方法
| switchDialog(id) | string | dialog ID | 切換到某個彈窗(模態(tài)彈窗無效)。 |
| refresh(id) | string | dialog ID | 刷新某個彈窗。 |
| reloadFlag(tabids) | string | 一個或多個標簽ID，多個ID以,分隔 | 為某(幾)個標簽設定重載標記(當切換到該標簽時重新載入)。 |
| reload(options) | object | 同dialog默認參數(shù) | 重新載入某個彈窗，如果未指定ID，則默認重載入當前彈窗。 |
| close(id) | string | dialog ID | 關閉某個彈窗。 |
| closeCurrent() | -- | -- | 關閉當前彈窗。 |
方法使用示例：
// 刷新ID為 dialog-test-1 的Dialog BJUI.dialog('refresh', 'dialog-test-1')alertmsg信息提示
alertmsg是B-JUI的信息提示組件，共有信息、成功、警告、錯誤、確認、輸入提示幾種類型。
使用
通過data屬性：
<button type="button" class="btn-default" data-toggle="alertmsg" data-options="{type:'info', msg:'我是一個普通的信息提示！'}">信息提示</button>通過JS API：
BJUI.alertmsg('ok', '我是一個成功的消息提示！', {okCall: function() {BJUI.alertmsg('info', '你點擊了確定按鈕！')} })?
參數(shù)
| type | string | null | [必選] 信息提示方式，參數(shù)有['ok' | 'correct' | 'info' | 'warn' | 'error' | 'confirm' | 'prompt' ]，其中ok為correct的別名，confirm為確認提示，prompt為輸入信息提示。 |
| msg | string | null | [必選] 提示的內容。 |
| displayPosition | string | topcenter | [可選] 提示框顯示位置，參數(shù)有['topleft' | 'topcenter' | 'topright' | 'middleleft' | 'middlecenter' | 'middleright' | 'bottomleft' | 'bottomcenter' | 'bottomright']，本參數(shù)可以覆蓋全局設置。 |
| displayMode | string | slide | [可選] 提示框顯示動畫(無動畫、漸顯漸隱、滑動)，參數(shù)['none' | 'fade' | 'slide']，本參數(shù)可以覆蓋全局設置。 |
| autoClose | boolean | null | [可選] 是否自動關閉提示框，默認在type為['ok' | 'correct' | 'info']三種方式時參數(shù)值為true。 |
| alertTimeout | int | null | [可選] 自動關閉提示框的時間(毫秒)，autoClose參數(shù)為true時生效，本參數(shù)可以覆蓋全局設置。 |
| mask | boolean | null | [可選] 是否模態(tài)顯示提示框，默認在type為['warn' | 'error' | 'confirm' | 'prompt']方式時參數(shù)值為true。 |
| title | string | 見bjui-regional.zh-CN.js中alertmsg | [可選] 信息提示框的標題，設置本參數(shù)將會覆蓋bjui-regional.zh-CN.js中alertmsg的對應設置。 |
| okName | string | 確定 | [可選] 確定按鈕的名稱，設置本參數(shù)將會覆蓋bjui-regional.zh-CN.js中alertmsg的對應設置。 |
| cancelName | string | 取消 | [可選]?僅type為'confirm'時有效取消按鈕的名稱，設置本參數(shù)將會覆蓋bjui-regional.zh-CN.js中alertmsg的對應設置。 |
| okCall | function() | null | [可選] 確定按鈕的回調方法，支持字符串類型的方法名，該方法會在提示框關閉后被調用。 |
| cancelCall | function() | null | [可選]?僅type為'confirm'時有效取消按鈕的回調方法，支持字符串類型的方法名，該方法會在提示框關閉后被調用。 |
| promptRequired | string | required | [可選]?僅type為'prompt'時有效，輸入提示框的驗證規(guī)則。 |
| promptname | object | prompt | [可選]?僅type為'prompt'時有效，輸入提示框的name屬性。 |
| promptval | string | null | [可選]?僅type為'prompt'時有效，輸入提示框的默認值。 |
| prompt | object | null | [可選]?僅type為'prompt'時有效。該參數(shù)是點擊確定后的ajax提交參數(shù)，詳細參數(shù)配置參考bjuiajax的doajax一節(jié)。示例：{url:'ajaxDone.json', type:'post', loadingmask:true}。注意：如果有自定義okCall參數(shù)，則該參數(shù)無效。 |
bjuiajax
bjuiajax是B-JUI封裝的一系列ajax異步請求。B-JUI消息JSON
當ajax請求時，服務端可以僅返回一個消息JSON告知前端框架處理的結果，這個JSON的格式如下： {"statusCode" : 200,"message" : "處理成功！" }消息JSON的參數(shù)
JSON的keystatusCode、message可以在框架初始化時通過參數(shù)keys更改，statusCode的狀態(tài)值有ok、error、timeout，代表成功、失敗、超時三種類型，可以通過參數(shù)statusCode更改。?
doajax異步請求
通過data屬性使用：
<button type="button" class="btn-default" data-toggle="doajax" 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))} })參數(shù)：
| url | string | null | [必選]?D-Url?ajax處理的URL，a鏈接觸發(fā)時可以將url定義在href屬性。 |
| type | string | POST | [可選] ajax請求方式。 |
| data | object | null | [可選] ajax請求發(fā)送到服務器的數(shù)據(jù)。 |
| confirmMsg | string | null | [可選] 執(zhí)行動作前的確認提示。 |
| okalert | boolean | true | [可選] 請求正常返回后，是否彈出相應的信息提示，當返回內容不是B-JUI消息JSON時，建議關閉。 |
| callback | function(json) | null | [可選] 自定義回調函數(shù)。 |
| okCallback | function(json, options) | null | [可選] 請求成功時的回調函數(shù)，該函數(shù)會覆蓋B-JUI默認的成功回調函數(shù)，函數(shù)的options參數(shù)即是該doajax的options參數(shù)。 |
| okAfterCallback | function(json, options) | null | [可選] 請求成功時的回調函數(shù)，該函數(shù)會在B-JUI默認的成功函數(shù)后執(zhí)行，函數(shù)的options參數(shù)即是該doajax的options參數(shù)。 |
| errCallback | function(json, options) | null | [可選] 請求失敗時的回調函數(shù)，函數(shù)的options參數(shù)即是該doajax的options參數(shù)。 |
| failCallback | function(msg, options) | null | [可選] ajax請求出錯時的回調函數(shù)，函數(shù)的msg參數(shù)是服務端返回的出錯信息，options參數(shù)即是該doajax的options參數(shù)。 |
| loadingmask | boolean | false | [可選] ajax請求時是否顯示數(shù)據(jù)加載遮罩。 |
| target | selector | null | [可選] 數(shù)據(jù)加載遮罩的父容器，值為空時默認是當前Navtab或Dialog。 |
| reload | boolean | false | [可選] 請求返回成功狀態(tài)后，是否重新加載當前target。 |
| forward | string | null | [可選] 跳轉地址，請求返回成功狀態(tài)后，加載forward地址對應的內容到當前target。 |
| forwardConfirm | boolean | false | [可選] 請求返回成功狀態(tài)后，是否重新加載當前target。 |
| closeCurrent | boolean | false | [可選] 請求返回成功狀態(tài)后，是否關閉當前target(僅navtab或dialog)。 |
| tabid | string | null | [可選] 請求返回成功狀態(tài)后，需要刷新的navtab的id集合，多個id以,分隔。 |
| dialogid | string | null | [可選] 請求返回成功狀態(tài)后，需要刷新的dialog的id集合，多個id以,分隔。 |
| divid | string | null | [可選] 請求返回成功狀態(tài)后，需要刷新的div(僅限通過doload加載的div)的id集合，多個id以,分隔。 |
| datagrids | string | null | [可選] 請求返回成功狀態(tài)后，需要刷新的datagrid的id集合，多個id以,分隔。 |
| gridrefreshflag | boolean | true | [可選] 刷新datagrid時保留其快速篩選、排序、分頁信息。 |
| ajaxTimeout | int | BJUI.ajaxTimeout | [可選] 請求超時設置，即$.ajax的timeout屬性。 |
請求返回成功狀態(tài)
指服務端返回B-JUI的消息JSON并在json[BJUI.keys.statusCode] == BJUI.statusCode.ok時有效。
ajaxform異步表單提交
通過data屬性使用（帶驗證）：
<form action="../../json/ajaxDone.json" data-toggle="ajaxform"><h5>Data API Ajax提交表單1（帶驗證）</h5><div class="bjui-row col-2"><label class="row-label">姓名</label><div class="row-input"><input type="text" name="username" data-rule="required"></div><label class="row-label">住址</label><div class="row-input"><input type="text" name="address" data-rule="required"></div></div><hr style="margin:5px 0 15px;"><div class="text-center"><button type="submit" class="btn-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))} })參數(shù)：
| url | string | null | [必選] 提交的URL，未指定時將取form的action屬性。 |
| type | string | POST | [可選] ajax請求方式，未指定該參數(shù)時會取form的method屬性值。 |
| confirmMsg | string | null | [可選] 提交表單前的確認提示。 |
| beforeSubmit | function(form) | null | [可選] 執(zhí)行動作前的確認函數(shù)，返回false時不提交表單。 |
| validate1.31 | boolean | true | [可選] 提交表單前是否需要驗證（需要驗證插件nicevalidate支持）。 |
| alertmsg | boolean | false | [可選] 是否彈出驗證未通過的信息提示。 |
| okalert | boolean | true | [可選] 請求正常返回后，是否彈出相應的信息提示。 |
| callback | function(json) | null | [可選] 自定義回調函數(shù)。 |
| okCallback | function(json, options) | null | [可選] 請求成功時的回調函數(shù)，該函數(shù)會覆蓋B-JUI默認的成功回調函數(shù)，函數(shù)的options參數(shù)即是該doajax的options參數(shù)。 |
| okAfterCallback | function(json, options) | null | [可選] 請求成功時的回調函數(shù)，該函數(shù)會在B-JUI默認的成功函數(shù)后執(zhí)行，函數(shù)的options參數(shù)即是該doajax的options參數(shù)。 |
| errCallback | function(json, options) | null | [可選] 請求失敗時的回調函數(shù)，函數(shù)的options參數(shù)即是該doajax的options參數(shù)。 |
| failCallback | function(msg, options) | null | [可選] ajax請求出錯時的回調函數(shù)，函數(shù)的msg參數(shù)是服務端返回的出錯信息，options參數(shù)即是該doajax的options參數(shù)。 |
| form | selector | null | [可選] 要提交的表單，通過JS API使用時需要。 |
| loadingmask | boolean | true | [可選] ajax請求時是否顯示數(shù)據(jù)加載遮罩。 |
| target | selector | null | [可選] 數(shù)據(jù)加載遮罩的父容器，值為空時默認是當前Navtab或Dialog。 |
| reload | boolean | false | [可選] 請求返回成功狀態(tài)后，是否重新加載當前target。 |
| forward | string | null | [可選] 跳轉地址，請求返回成功狀態(tài)后，加載forward地址對應的內容到當前target。 |
| forwardConfirm | boolean | false | [可選] 請求返回成功狀態(tài)后，是否重新加載當前target。 |
| closeCurrent | boolean | false | [可選] 請求返回成功狀態(tài)后，是否關閉當前target(僅navtab或dialog)。 |
| tabid | string | null | [可選] 請求返回成功狀態(tài)后，需要刷新的navtab的id集合，多個id以,分隔。 |
| dialogid | string | null | [可選] 請求返回成功狀態(tài)后，需要刷新的dialog的id集合，多個id以,分隔。 |
| divid | string | null | [可選] 請求返回成功狀態(tài)后，需要刷新的div(僅限通過doload加載的div)的id集合，多個id以,分隔。 |
| datagrids | string | null | [可選] 請求返回成功狀態(tài)后，需要刷新的datagrid的id集合，多個id以,分隔。 |
| gridrefreshflag | boolean | true | [可選] 刷新datagrid時保留其快速篩選、排序、分頁信息。 |
| ajaxTimeout | int | BJUI.ajaxTimeout | [可選] 請求超時設置，即$.ajax的timeout屬性。 |
請求返回成功狀態(tài)
指服務端返回B-JUI的消息JSON并在json[BJUI.keys.statusCode] == BJUI.statusCode.ok時有效。
doload異步加載
通過Data屬性使用：
<button type="button" class="btn-default" data-toggle="ajaxload" 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' })參數(shù)：
| target | selector | null | [必選] 目標容器的 jQuery選擇器表達式 或 DOM對象。 |
| url | string | null | [必選]?D-Url?遠程加載的URL，a鏈接觸發(fā)時可以將url定義在href屬性。 |
| type | string | GET | [可選] ajax請求方式。 |
| data | object | null | [可選] ajax請求發(fā)送到服務器的數(shù)據(jù)。 |
| autorefresh | boolean/int(秒) | null | [必選] 指定該div容器是否可自動刷新，為true時默認間隔15秒自動刷新，指定具體的秒數(shù)則以指定的間隔秒值自動刷新。 |
| callback | function(json) | null | [可選] 加載成功后的回調函數(shù)。 |
| loadingmask | boolean | true | [可選] ajax請求時是否顯示數(shù)據(jù)加載遮罩。 |
| ajaxTimeout | int | BJUI.ajaxTimeout | [可選] 請求超時設置，即$.ajax的timeout屬性。 |
方法：
| refreshdiv(id) | string | 一個或多個div容器ID，多個ID以,分隔 | 刷新指定id的div容器。 |
| refreshlayout(target) | selector | 目標容器的 jQuery選擇器表達式 或 DOM對象 | 刷新指定的div容器。 |
| reloadlayout(options) | object | 同doload的默認參數(shù) | 重新載入某個div容器。 |
方法使用示例：
// 重新加載 #ajaxload_test_box 容器 BJUI.ajax('reloadlayout', {target:'#ajaxload_test_box', url:'html/base/ajax_layout2.html'})ajaxdownload異步下載
通過Data屬性使用：
<button type="button" class="btn-default" data-toggle="ajaxdownload" data-options="{url:'../ajaxdownload?t=1'}">ajax下載</button>通過JS API使用：
BJUI.ajax('ajaxdownload', {url:'../ajaxdownload?t=1',loadingmask: true })參數(shù)：
| url | string | null | [必選]?D-Url?下載的URL。 |
| type | string | GET | [可選] ajax請求方式。 |
| data | object | null | [可選] 發(fā)送到服務器的數(shù)據(jù)。 |
| target | selector | null | [可選] 數(shù)據(jù)加載遮罩的父容器，值為空時默認是當前Navtab或Dialog。 |
| loadingmask | boolean | false | [可選] ajax請求時是否顯示數(shù)據(jù)加載遮罩。 |
| confirmMsg | string | null | [可選] 下載前的確認提示。 |
| failCallback | function(responseHtml, url) | B-JUI框架提示及取消loadingmask遮罩效果。 | [可選] ajax請求失敗時的回調函數(shù)。 |
| prepareCallback | function(url) | 根據(jù)loadingmask參數(shù)加載遮罩。 | [可選] ajax請求中的回調函數(shù)。 |
| successCallback | function(url) | 取消loadingmask遮罩效果。 | [可選] ajax請求成功的回調函數(shù)。 |
ajaxdownload說明
需要依賴插件$.fileDownload。
ajaxsearch搜索表單1.31
通過data屬性使用（不驗證）：
<form action="../../html/base/ajax.html" data-toggle="ajaxsearch" data-options="{validate:false}"><h5>Ajax表單搜索（重載當前navtab，不驗證）</h5><div class="bjui-row col-2"><label class="row-label">姓名</label><div class="row-input"><input type="text" name="username" data-rule="required"></div><label class="row-label">住址</label><div class="row-input"><input type="text" name="address" data-rule="required"></div></div><hr style="margin:5px 0 15px;"><div class="text-center"><button type="submit" class="btn-default">搜索表單</button></div> </form>通過JS API屬性使用（帶驗證）：
BJUI.ajax('ajaxsearch', {url: '../../html/base/ajax.html',form: $.CurrentNavtab.find('form:eq(1)'),validate: true,loadingmask: true })參數(shù)：
| url | string | null | [必選] 提交的URL，未指定時將取form的action屬性。 |
| type | string | POST | [可選] ajax請求方式，未指定該參數(shù)時會取form的method屬性值。 |
| beforeSubmit | function(form) | null | [可選] 執(zhí)行動作前的確認函數(shù)，返回false時不提交表單。 |
| validate | boolean | true | [可選] 提交表單前是否需要驗證（需要驗證插件nicevalidate支持）。 |
| alertmsg | boolean | false | [可選] 是否彈出驗證未通過的信息提示。 |
| searchDatagrid | selector | null | [可選] 將form域中的信息用來搜索指定datagrid，如果有該參數(shù)，則參數(shù)okalert之后的參數(shù)都無效。 |
| form | selector | null | [可選] 要提交的表單，通過JS API使用時需要。 |
| loadingmask | boolean | true | [可選] ajax請求時是否顯示數(shù)據(jù)加載遮罩。 |
| target | selector | null | [可選] 數(shù)據(jù)加載遮罩的父容器，值為空時默認是當前Navtab或Dialog。 |
| okalert | boolean | true | [可選] 請求正常返回后，是否彈出相應的信息提示。 |
| callback | function(json) | null | [可選] 自定義回調函數(shù)。 |
| okCallback | function(json, options) | null | [可選] 請求成功時的回調函數(shù)，該函數(shù)會覆蓋B-JUI默認的成功回調函數(shù)，函數(shù)的options參數(shù)即是該doajax的options參數(shù)。 |
| okAfterCallback | function(json, options) | null | [可選] 請求成功時的回調函數(shù)，該函數(shù)會在B-JUI默認的成功函數(shù)后執(zhí)行，函數(shù)的options參數(shù)即是該doajax的options參數(shù)。 |
| errCallback | function(json, options) | null | [可選] 請求失敗時的回調函數(shù)，函數(shù)的options參數(shù)即是該doajax的options參數(shù)。 |
| failCallback | function(msg, options) | null | [可選] ajax請求出錯時的回調函數(shù)，函數(shù)的msg參數(shù)是服務端返回的出錯信息，options參數(shù)即是該doajax的options參數(shù)。 |
| reload | boolean | false | [可選] 請求返回成功狀態(tài)后，是否重新加載當前target。 |
| forward | string | null | [可選] 跳轉地址，請求返回成功狀態(tài)后，加載forward地址對應的內容到當前target。 |
| forwardConfirm | boolean | false | [可選] 請求返回成功狀態(tài)后，是否重新加載當前target。 |
| closeCurrent | boolean | false | [可選] 請求返回成功狀態(tài)后，是否關閉當前target(僅navtab或dialog)。 |
| tabid | string | null | [可選] 請求返回成功狀態(tài)后，需要刷新的navtab的id集合，多個id以,分隔。 |
| dialogid | string | null | [可選] 請求返回成功狀態(tài)后，需要刷新的dialog的id集合，多個id以,分隔。 |
| divid | string | null | [可選] 請求返回成功狀態(tài)后，需要刷新的div(僅限通過doload加載的div)的id集合，多個id以,分隔。 |
| datagrids | string | null | [可選] 請求返回成功狀態(tài)后，需要刷新的datagrid的id集合，多個id以,分隔。 |
| gridrefreshflag | boolean | true | [可選] 刷新datagrid時保留其快速篩選、排序、分頁信息。 |
| ajaxTimeout | int | BJUI.ajaxTimeout | [可選] 請求超時設置，即$.ajax的timeout屬性。 |
請求返回成功狀態(tài)
指服務端返回B-JUI的消息JSON并在json[BJUI.keys.statusCode] == BJUI.statusCode.ok時有效。
Datagrid
Datagrid，即數(shù)據(jù)表格，是B-JUI的重要組成部分。使用
通過data屬性：
<table class="table table-bordered" data-toggle="datagrid" data-options="{dataUrl: '../../json/datagrid-test.json' }"><thead><tr><th data-options="{name:'name',align:'center',width:70}">名稱</th><th data-options="{name:'desc'}"align="center">描述</th><th data-options="{name:'beizhu'}">備注</th><th data-options="{name:'createtime',align:'center',type:'date',pattern:'yyyy-MM-dd HH:mm:ss'}">創(chuàng)建時間</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:'創(chuàng)建時間',align:'center',type:'date',pattern:'yyyy-MM-dd HH:mm:ss'}] })參數(shù)
| gridTitle | string | null | [可選] 標題。 |
| columns | array | null | [可選] 表頭模型，適用動態(tài)生成表頭，如果未設置本參數(shù)，將自動轉化靜態(tài)表頭為模型。詳細請查看columns參數(shù) |
| data | array | null | [可選] 提供datagrid需要的數(shù)據(jù)，如果同時設置有dataUrl參數(shù)，本參數(shù)優(yōu)先級高。 |
| dataUrl | string | null | [可選] Ajax請求數(shù)據(jù)的URL。返回數(shù)據(jù)模板:? JSON:{totalRow:50, pageCurrent:1, list:[{name:'孫悟空',sex:true}, {name:'美國隊長', true}]}? Array:{totalRow:50, pageCurrent:1, list:[['孫悟空',true], ['美國隊長', true]]} 注意：分頁參數(shù)totalRow、pageCurrent、pageSize的key值引用的框架初始化時的pageInfo配置。 |
| postData | object | {} | [可選] ajax請求發(fā)送到服務器的數(shù)據(jù)。 |
| loadType | string | POST | [可選] Ajax請求方式。 |
| dataType | string | json | [可選] 數(shù)據(jù)類型，可選參數(shù)['json' | 'array' | 'xml']。 |
| hiddenFields | array | null | [可選]?dataType='array'有效隱藏字段，可以將不能加載到頁面上的值設置到給定的字段，array數(shù)據(jù)除去表頭的列后依次賦值。 |
| local | string | remote | [可選] 處理數(shù)據(jù)方式，可選參數(shù)['local' | 'remote']，(影響（分頁、排序、篩選）)。 |
| fieldSortable | boolean | true | [可選] 點擊頁頭字段快速排序。普通表格轉為datagrid的，需設置dataUrl參數(shù)，local = 'remote' |
| filterThead | boolean | true | [可選] 允許表格頭部快速篩選。普通表格轉為datagrid的，需設置dataUrl參數(shù)，local = 'remote' |
| sortAll | boolean | false | [可選] 排序范圍，true = 所有數(shù)據(jù)排序， false = 當前頁數(shù)據(jù)排序。普通表格轉為datagrid的，默認為true |
| filterAll | boolean | false | [可選] 篩選范圍，true = 從所有數(shù)據(jù)中篩選，false = 從當前頁數(shù)據(jù)中篩選。普通表格轉為datagrid的，默認為true |
| filterMult | boolean | true | [可選] 支持多字段篩選。 |
| initFilter | object | {} | [可選] 初始化字段篩選。 |
| linenumberAll | boolean | false | [可選] 行號范圍，true = 為所有數(shù)據(jù)編號，false = 為當前頁數(shù)據(jù)編號。 |
| showLinenumber | boolean/ string | true | [可選] 是否顯示行號，參數(shù)[true | false | 'lock']，lock參數(shù) = 鎖定行號列（適用于多列字段，出現(xiàn)橫向滾動條的情況）。 |
| showCheckboxcol | boolean/ string | false | [可選] 是否顯示行復選框，參數(shù)同上。 |
| showEditbtnscol | boolean | false | [可選] 是否顯示編輯按鈕列。 |
| showToolbar | boolean | false | [可選] 是否顯示工具條，需要設置參數(shù)toolbarItem或toolbarCustom。 |
| showNoDataTip | boolean/string | true | [可選] 沒有獲取到數(shù)據(jù)時顯示的提示信息。可選參數(shù)[true | false，'自定義提示']，true = 框架默認提示['沒有數(shù)據(jù)！'], false = 不顯示。 |
| toolbarItem | string | null | [可選] 顯示工具條按鈕，可選參數(shù)['all, add, edit, cancel, save, del, import, export, exportf, |']，“all” = 顯示所有按鈕，“|” = 按鈕組分隔符。 |
| toolbarCustom | string/ object/ function | null | [可選] 自定義的html內容或jQuery DOM對象，支持帶返回值函數(shù)。 |
| columnResize | boolean | true | [可選] 允許調整列寬。 |
| columnMenu | boolean | true | [可選] 表頭字段列上顯示菜單按鈕。 |
| columnShowhide | boolean | true | [可選] 表頭字段列菜單上出現(xiàn) “顯示/隱藏 列” 選項。 |
| columnFilter | boolean | true | [可選] 表頭字段列菜單上出現(xiàn) “過濾” 選項。 |
| columnLock | boolean | true | [可選] 表頭字段列菜單上出現(xiàn) “鎖定列、解除鎖定” 選項。 |
| paging | boolean/ object | true | [可選] 是否顯示分頁組件，可設置分頁參數(shù)。分頁參數(shù)模板：?{pageSize:30, selectPageSize:'30,60,90', pageCurrent:1, showPagenum:5, totalRow:0} 如果local='remote'，并通過dataUrl參數(shù)請求json數(shù)據(jù)時，返回的數(shù)據(jù)要提供totalRow、pageCurrent參數(shù)，可提供pageSize參數(shù)? 注意：分頁參數(shù)totalRow、pageCurrent、pageSize的key值引用的框架初始化時的pageInfo配置。 |
| pagingAlign | string | center | [可選] 分頁組件對齊方式，參數(shù)['left' | 'center' | 'right'] |
| keys | object | [可選] 提交編輯數(shù)據(jù)時需要移除的數(shù)據(jù)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'} | |
| hasChild | boolean | false | [可選] 是否包含子表。 |
| childOptions | object | [可選] 子表參數(shù)。 1 { 2 width : '100%', // 子表寬 3 height : 'auto', // 子表高 4 paging : false, // 子表分頁參數(shù) 5 columnMenu : false, // 子表列菜單 6 filterThead : false, // 子表表頭快速篩選 7 childUpdate : false // 子表改動時是否更新父表數(shù)據(jù)(需要主表有updateRowUrl參數(shù)支持)，參數(shù) (Boolean: true | false, true = 'all') OR (String: 'all, add, edit, del') 8 }? | |
| isTree | boolean | false | [可選] 是否樹型表。 |
| treeOptions | object | [可選] 樹型表參數(shù)。 1 { 2 keys : { 3 key : 'id', // id 4 parentKey : 'pid', // 父id 5 childKey : 'children', // 子列表數(shù)據(jù)key值 6 childLen : 'childlen', // 子列表數(shù)據(jù)條數(shù) 7 isParent : 'isparent', // 是否父數(shù)據(jù) 8 level : 'level', // 層級 9 order : 'order', // 順序 10 isExpand : 'isExpand' // 子列表是否展開 11 }, 12 simpleData : true, // 是否簡單數(shù)據(jù)(array格式) 13 add : true // 顯示添加按鈕 14 } | |
| dropOptions | object | [可選] 拖動參數(shù)。 1 { 2 drop : false, // 拖動開關 3 dropUrl : null, // 拖動結束后，發(fā)送數(shù)據(jù)到該url 4 paging : true, // 是否發(fā)送分頁參數(shù) 5 scope : 'drop', // 發(fā)送拖動數(shù)據(jù)范圍，'drop' = '被拖動影響的數(shù)據(jù)'，'all' = '當前頁全部數(shù)據(jù)' 6 beforeDrag : null, // function($tr, data)，拖動前方法，返回false則不拖動 7 beforeDrop : null, // function(sourceData, descData, position)，拖動到目標并放置之前方法，返回false則不放置，參數(shù)分別是：(源數(shù)據(jù)、目標數(shù)據(jù)、放置位置(append、before、after)) 8 afterDrop : 'POST' // string 或 function($descTr, $sourceTr)，如果是字符串并有dropUrl參數(shù)，則發(fā)送拖動數(shù)據(jù)到dropUrl，否則執(zhí)行自定義方法 9 } | |
| tdTemplate | string/ function(data) | null | [可選] 格式化表格的數(shù)據(jù)模板，需配合參數(shù)templateWidth，當檢測到窗口寬度小于templateWidth，就用tdTemplate模板格式化行數(shù)據(jù)。模板字符串示例："<div><h1>標題：{#title}</h1><p>內容：{#content}</p></div>"，使用{#字段key }可以替換當前行數(shù)據(jù)對應字段值。function示例：function(data) {return '<div><h1>標題：'+ data.title +'</h1><p>內容：'+ data.content +'</p></div>' } |
| templateWidth | int | 600 | [可選] 當表格寬度小于設定值時，根據(jù)templateWidth參數(shù)格式化行數(shù)據(jù)。當值設為0時1.31，始終以自定義模板方式顯示。推薦將參數(shù)值與參數(shù)dialogFilterW設置一致，以達到最佳效果。 |
| dialogFilterW | int | 360 | [可選] 當表格寬度小于設定值時，將表頭的快速篩選更換為dialog模式。當值設為0時1.31，表頭將固定為dialog模式。 |
| editUrl | string | null | [可選] 保存編輯、添加數(shù)據(jù)的url，Ajax請求方式為POST，服務器端接收的參數(shù)名稱為"json"，數(shù)據(jù)類型是JSON Array。editUrl支持行數(shù)據(jù)動態(tài)賦值，賦值id的例子：{editUrl:'news/edit?id={id}'}，{id}部分會自動替換為該行數(shù)據(jù)的ID字段值。 |
| editCallback | function(json) | null | [可選] 保存成功后的回調，返回的json內容可以是B-JUI默認的回調json或保存后的json數(shù)據(jù)，datagrid默認回調：如果返回保存后的json數(shù)據(jù)，將會更新對應的數(shù)據(jù)行。 |
| editMode | string/ object | inline | [可選] 編輯、添加數(shù)據(jù)的方式，參數(shù)[false | 'inline' | 'dialog']。false = 不能編輯，inline = 行內編輯，dialog = 彈窗編輯。自定義dialog方式：{dialog:{dialog參數(shù)}}，自定義navtab方式：{navtab:{navtab參數(shù)}} |
| editDialogOp | object | null | [可選] 彈窗編輯方式時，設置彈出窗口的參數(shù)，如{width:500, height:300, mask:false} |
| inlineEditMult | boolean | true | [可選] 允許行內編輯模式下同時添加/編輯多行。 |
| saveAll | boolean | true | [可選] 適用于多行行內編輯時，一次性保存全部數(shù)據(jù)，發(fā)送到服務器端數(shù)據(jù)格式見參數(shù)editUrl。 |
| addLocation | string | first | [可選] 添加新行數(shù)據(jù)于當前頁的位置，參數(shù)['first' | 'last' | 'prev' | 'next']，參數(shù)prev和next參考當前選中行位置。 |
| delUrl | string | null | [可選] 刪除數(shù)據(jù)的url，服務器端接收的數(shù)據(jù)見參數(shù)delPK |
| delType | string | POST | [可選] Ajax刪除數(shù)據(jù)的請求方式。 |
| delPK | string | null | [可選] 設置刪除主鍵名，如果設置了主鍵，則只發(fā)送該字段的值(刪除多條則主鍵值以逗號分隔)到服務器端，否則發(fā)送JSON數(shù)據(jù)（參數(shù)名"json"，數(shù)據(jù)類型為JSON Array）。 |
| delConfirm | boolean/ string | null | [可選] 刪除前的確認提示，參數(shù)[true | false | '自定義提示信息']，參數(shù)為false時不彈出提示信息。 |
| delCallback | function(json) | null | [可選] 刪除成功后的回調函數(shù)，返回的json內容為B-JUI默認的回調json。 |
| jsonPrefix | string | null | [可選] 發(fā)送到服務器端的json數(shù)據(jù)(name)加前綴，包括(保存、刪除、篩選)操作。 |
| contextMenuH | boolean | true | [可選] 在表頭上右鍵點擊時出現(xiàn) ”顯示/隱藏列“ 的快捷菜單。 |
| contextMenuB | boolean | false | [可選] 在數(shù)據(jù)行右鍵點擊時出現(xiàn)快捷菜單，菜單選項有(刷新、添加、編輯、取消、刪除)。 |
| hScrollbar | boolean | false | [可選] 允許出現(xiàn)橫向滾動條。 |
| width | int/percent | null | [可選] datagrid容器寬度，默認為父容器的寬，相當于'100%'。 |
| tableWidth | int/percent | null | [可選] 表格的寬度，默認是各列寬度之和。 |
| height | int/percent | 300 | [可選] datagrid容器高度。 |
| importOption | object | null | [可選] 工具欄的導入按鈕參數(shù)，dialog或navtab方式打開導入頁面，參數(shù)模板{type:"dialog", options:{url:'', width:400, height:200}} |
| exportOption | object | null | [可選] 工具欄的導出按鈕參數(shù)，執(zhí)行ajax url或以dialog or navtab方式打開導出頁面，參數(shù)模板{type:"ajax", options:{url:""}} |
| beforeEdit | function | null | [可選] 帶返回值方法，編輯數(shù)據(jù)前調用，返回true繼續(xù)編輯，返回false取消編輯。 |
| beforeDelete | function | null | [可選] 帶返回值方法，刪除數(shù)據(jù)前調用，返回true繼續(xù)刪除，返回false取消刪除。 |
| afterSave | function($trs, datas) | null | [可選] 保存成功后執(zhí)行方法，參數(shù)$trs為保存行(jQuery 對象)，datas為保存行對應數(shù)據(jù)(JSON Array)。 |
| afterDelete | function | null | [可選] 刪除成功后執(zhí)行方法。 |
columns參數(shù)
| name | string | null | [可選] 該列字段名(關聯(lián)json數(shù)據(jù)、xml數(shù)據(jù)、編輯及保存的數(shù)據(jù))。未設置name將不能進行添加\編輯\快速篩選\排序等操作 |
| label | string | null | [可選] 顯示的列標題。 |
| width | int | auto | [可選] 列寬。 |
| align | string | left | [可選] 對齊方式(left、center、right)。 |
| type | string | string | [可選] 數(shù)據(jù)類型(string、boolean、select、textarea、date、findgrid、spinner、tags)。 |
| align | string | left | [可選] 對齊方式(left、center、right)。 |
| add | boolean | true | [可選] 允許該列添加數(shù)據(jù)。 |
| edit | boolean | true | [可選] 允許該列編輯數(shù)據(jù)。 |
| attrs | object | null | [可選] 編輯時，表單域的附加參數(shù)。示例：{readonly:'readonly'} |
| rule | string | null | [可選] 編輯時，表單域名的驗證規(guī)則。示例：required;length(6) |
| items | array/function | null | [可選] 用于數(shù)據(jù)渲染或篩選\編輯時的select填充。array示例：[{'true':'男'}, {'false':'女'}],；array示例21.31：[{"sex":true, "name":"男"}, {"sex":false, "name":"女"}]，需配合參數(shù)itemattr使用；function示例：function() {return $.getJSON('/datagrid/demo-items-state.js')} |
| itemattr1.31 | object | null | [可選] 用于正確獲取items參數(shù)的內容。如items的array示例2，本參數(shù)設置為：{value:'sex',label:'name'} |
| render | function(value, data) | null | [可選] 將列數(shù)據(jù)渲染成其他樣式，方法參數(shù)value為datagrid數(shù)據(jù)提供的原始值。組合顯示示例：function(value, data){return value + '('+ data.name +')'}，datagrid提供基于items的默認渲染：$.datagrid.renderItem |
| pattern | string | null | [可選] 配合type='date'使用，設置日期格式。示例：yyyy-MM-dd HH:mm |
| hide | boolean | false | [可選] 是否隱藏該列。 |
| menu | boolean | true | [可選] 列上是否出現(xiàn)菜單按鈕（如果是多表頭，僅對字段列有效）。 |
| lock | boolean | false | [可選] 是否鎖定該列(盡量不用，影響速度)。 |
| quicksort | boolean | true | [可選] 允許點擊該列進行快速排序。 |
| quickfilter | boolean | true | [可選] 允許該列進行表頭快速篩選。 |
| finalWidth | boolean | false | [可選] 固定該列的寬度，不受內容多少變更寬度。 |
方法
| refresh(filterFlag) | boolean | true = 保留篩選、排序、分頁數(shù)據(jù)，false = 不保留 | 刷新，重新加載數(shù)據(jù)。 |
| reload(options) | object | 同datagrid的options | 重載，使用新的options對應覆蓋舊的options，生成一個新的datagrid，如果新的options有參數(shù)columns，將會直接替換舊的columns。 |
| filter(data)1.31 | object | 需要篩選的數(shù)據(jù) | 快速篩選，以新提供的數(shù)據(jù)覆蓋postData參數(shù)，重新向服務端請求數(shù)據(jù)，可以通過data提供boolean參數(shù)clearOldPostData，使框架保留或取消原有的postData參數(shù)。篩選name示例：$().datagrid('filter', {name:'張三'}) |
| refreshParent(filterFlag) | boolean | true = 保留父表的篩選、排序、分頁數(shù)據(jù)，false = 不保留 | 刷新父表數(shù)據(jù)，有父表數(shù)據(jù)時使用有效。 |
| refreshChild(row, filterFlag) | int/string/object, boolean | 單個數(shù)據(jù)行的索引、逗號分隔的行索引字符串、數(shù)據(jù)行的jQuery對象，filterFlag{true = 保留子表的篩選、排序、分頁數(shù)據(jù)，false = 不保留} | 刷新子表數(shù)據(jù)，有子表數(shù)據(jù)時使用有效。 |
| showChild(row, flag, func) | int/string/object, boolean, function($childTable) | 單個數(shù)據(jù)行的索引、逗號分隔的行索引字符串、數(shù)據(jù)行的jQuery對象，flag{true = 顯示，false = 隱藏}，func是顯示或隱藏子表后的回調函數(shù)。 | 顯示/隱藏指定數(shù)據(jù)行的子表。 |
| updateRow(row, [updateData]) | int/string/object, object | 單個數(shù)據(jù)行的索引、逗號分隔的行索引字符串、數(shù)據(jù)行的jQuery對象，updateData是需要更新的JSON數(shù)據(jù)。 | 更新指定數(shù)據(jù)行的數(shù)據(jù)。未指定參數(shù)updateData時，如果datagrid定義有updateRowUrl參數(shù)，則通過ajax獲取對應的數(shù)據(jù)。 |
| doAjaxRow(row, opts) | int/string/object, object | 單個數(shù)據(jù)行的索引、逗號分隔的行索引字符串、數(shù)據(jù)行的jQuery對象，opts是doajax的相應參數(shù)。 | 指定數(shù)據(jù)行執(zhí)行ajax操作，opts的url參數(shù)支持當前行數(shù)據(jù)動態(tài)賦值，如{url:'doajax?id={id}'}，{id}部分會自動替換為該行數(shù)據(jù)的ID字段值。如果opts未定義callback或okcallback參數(shù)，datagrid會執(zhí)行updateRow(json)操作。 |
| expand(row, expandFlag) | int/string/object, boolean | 單個數(shù)據(jù)行的索引、逗號分隔的行索引字符串、數(shù)據(jù)行的jQuery對象，expandFlag{true = 展開，false = 折疊}。 | (僅適用于樹表)展開/折疊子節(jié)點。 |
| showLinenumber(flag) | boolean/string | true | false， 'lock' | 'unlock' | 行號列：顯示、隱藏、鎖定、解除鎖定。 |
| showCheckboxcol(flag) | boolean/string | true | false， 'lock' | 'unlock' | 復選框列：顯示、隱藏、鎖定、解除鎖定。 |
| showEditCol(tabids) | boolean | true | false | 編輯按鈕列：顯示、隱藏。 |
| showhideColumn(column, showFlag) | object/int, boolean | column = 列索引或字段列的jQuery對象，showFlag = true/false | 顯示、隱藏某列。 |
| selectedRows(rows, [selected]) | int/string/object, [boolean] | 單個數(shù)據(jù)行的索引、逗號分隔的行索引字符串、數(shù)據(jù)行的jQuery對象，[可選參數(shù)，選中|取消選中，默認選中] | 選中/取消選中行。 |
| externalEdit(row, editOpts) | int/object, object | 參數(shù)：單個數(shù)據(jù)行的索引、數(shù)據(jù)行的jQuery對象，編輯參數(shù)(navtab或dialog) 自定義編輯，如果編輯url同datagrid的editUrl參數(shù)，則可以省略editOpts的url參數(shù)，url參數(shù)支持行數(shù)據(jù)動態(tài)替換。示例： 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) | string | 'first' | 'last' | 'prev' | 'next' | 添加行，參數(shù)參考datagrid參數(shù)addLocation。 |
| doEditRow(row) | object/int | 數(shù)據(jù)行的jQuery對象或行索引。 | 編輯行。 |
| doCancelEditRow(row) | object/int | 數(shù)據(jù)行的jQuery對象或行索引。 | 取消編輯行。 |
| doSaveEditRow(row) | object/int | 數(shù)據(jù)行的jQuery對象或行索引。 | 保存編輯行。 |
| delRows(rows) | int/string/object | 單個數(shù)據(jù)行的索引、逗號分隔的行索引字符串、數(shù)據(jù)行的jQuery對象 | 刪除行。 |
| saveAll() | -- | -- | 保存所有編輯行。 |
| jumpPage(pageNum, [pageSize]) | int, int | 跳轉頁碼(僅設置分頁大小參數(shù)時，可設為null)，[可選參數(shù)，頁大小] | 跳轉到指定頁碼。 |
| destroy() | -- | -- | 銷毀datagrid。 |
獲取數(shù)據(jù)
| $(table).data('filterDatas') | object | datagrid參數(shù){local:'remote'}時有效。取得篩選數(shù)據(jù)，包含快速篩選、頁碼、排序信息。 |
| $(table).data('selectedDatas') | array | 取得選中行數(shù)據(jù)。 |
| $(table).data('selectedTrs') | jQuery Object | 取得選中行的jQuery對象。 |
| $(table).data('allData') | array | 取得當前(頁/所有)數(shù)據(jù)。datagrid參數(shù){local:'remote'}時取得當前頁數(shù)據(jù)，否則取得所有數(shù)據(jù)。 |
Findgrid
Findgrid是一個dialog + datagrid的組合組件，它可以將datagrid的數(shù)據(jù)賦值到相應的表單域，或執(zhí)行自定義的操作。使用
通過data屬性：
<input id="findgrid1" type="text" name="obj.xm" value="" data-toggle="findgrid" data-options="{group: 'obj',include: 'xm:name, description:desc',dialogOptions: {title:'查找職業(yè)'},gridOptions: {local: 'local',dataUrl: '../../json/datagrid/profession.json',columns: [{name:'name', label:'名稱', width:100},{name:'desc', label:'描述'},{name:'date', label:'創(chuàng)建日期'}]} }" placeholder="點放大鏡按鈕查找">通過JS API：
BJUI.findgrid({group: 'obj',include: 'name3:name, description:desc',dialogOptions: {title:'查找職業(yè)'},gridOptions: {local: 'local',dataUrl: '../../json/datagrid/profession.json',columns: [{name:'name', label:'名稱', width:100},{name:'desc', label:'描述'},{name:'date', label:'創(chuàng)建日期'}]} })
參數(shù)
| pk | string | null | [可選] 行數(shù)據(jù)的主鍵值，當打開Findgrid窗口時，用來標記已選中項。 |
| oldData | string/array | null | [可選] 對應pk參數(shù)的值，參數(shù)multiple=true時，多個值以逗號分隔或提供array格式。 |
| group | string | null | [可選] 選中后要賦值input的name前綴，如text的name為obj.name，那么group就是obj。 |
| suffix | string | null | [可選] 選中后要賦值input的name后綴，如text的name為obj.name[]，那么suffix就是[]。 |
| include | string | null | [可選] 要賦值的input名稱集合，多個以逗號,分隔。舉例：如果有一堆表單域的name分別為obj.name, obj.sex, obj.age，如果只需要填充name和sex，那include就是name,sex，如果name對應的數(shù)據(jù)行的key是xm，那可以寫作name:xm,sex，冒號前面是input的name，即將datagrid選中行的xm字段值賦值到obj.name域。 |
| exclude | string | null | [可選] 與include相反，排除要賦值的input名稱集合。注意：如果已設置include參數(shù)，則本參數(shù)無效。 |
| multiple | boolean | false | [可選] 是否開啟多行選擇。 |
| append | boolean | false | [可選] 多選時的賦值模式，true = 追加（會有重復值），false = 替換。 |
| empty | boolean | true | [可選] 是否在Findgrid窗口上顯示清空按鈕。 |
| dialogOptions | object | {id:null,mask:true,width:600,height:400,title:'Findgrid',maxable:true,resizable:true} | [可選] Findgrid彈窗參數(shù)，請參考dialog參數(shù)設置。 |
| gridOptions | object | {width:'100%',height:'100%',tableWidth:'100%',columnMenu:false} | [必選] 請參考datagrid參數(shù)。 |
| context | selector | 當前dialog或navtab | [可選] 僅在指定的容器中查找待賦值input。 |
| beforeSelect | function(data) | null | [可選] 選中數(shù)據(jù)行時的事件回調函數(shù)，返回boolean，true = 繼續(xù)執(zhí)行，false = 取消賦值。 |
| onSelect | function(data) | null | [可選] 該函數(shù)用于替換Findgrid默認的賦值操作，data參數(shù)為選中行數(shù)據(jù)，單選時類型為object，多選時為array。 |
| afterSelect | function(data) | null | [可選] Findgrid的賦值操作完成后的回調函數(shù)。 |
分頁組件1.31
分頁組件Pagination，當觸發(fā)頁面跳轉時，可以自定義回調函數(shù)或通過指定的form提交相應參數(shù)到服務端處理。使用
通過data屬性使用：
<ul id="pagination_test_ul1"></ul> <div data-toggle="pagination" 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 id="test_pagination"></div> $('#test_pagination').pagination({width: '50%',total:1000, pageSize:5, form:'#pagination_test_searchform' })
參數(shù)
| width | int/percent | 100% | [可選] 分頁組件的寬度。 |
| pageSize | int | 30 | [可選] 頁碼大小。 |
| selectPageSize | string | '30,60,90' | [可選] 可供選擇的頁碼大小集合。 |
| pageCurrent | int | 1 | [可選] 當前頁碼。 |
| total | int | 0 | [可選] 總記錄數(shù)。 |
| showPagenum | int | 5 | [可選] 可供點擊的頁碼個數(shù)。 |
| form | selector | null | [可選] 觸發(fā)頁碼跳轉時向該form寫入pageCurrent及pageSize參數(shù)，并提交該form。 |
| callback | function(pageCurrent, pageSize) | null | [可選] 觸發(fā)頁碼跳轉時，執(zhí)行該回調函數(shù)。注意：參數(shù)callback的優(yōu)先級比form高。 |
分頁相關參數(shù)
分頁參數(shù)total、pageCurrent、pageSize的key值引用的框架初始化時的pageInfo配置。
方法
| jumpPage(pageCurrent, [pageSize]) | int, [int] | 跳轉頁碼，[頁記錄數(shù)] | 跳轉到某個頁面，可以改變現(xiàn)有頁面記錄數(shù)。 |
| destroy() | -- | -- | 銷毀分頁組件。 |
方法使用示例：
$('#test_pagination').pagination('jumpPage', 12)?
最新版本：| v1.31 | 點我下載 | 2016/11/01 |
| v1.3 | 點我下載 | 2016/10/21 |
| v1.3 beta2 | 點我下載 | 2016/01/06 |
| v1.3.beta | 點我下載 | 2015/12/31 |
| v1.2 | 點我下載 | 2015/05/22 |
轉載于:https://www.cnblogs.com/jiathis/p/9550787.html
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結
以上是生活随笔為你收集整理的B-JUI文档、下载的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【Python生成器与迭代器的区别】
- 下一篇： 特种作业2021年电力电缆考试题库