B-JUI文檔、下載

概述

特別說明

本文檔僅適用於最新版的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 class="bjui-pageHeader">
	<!-- 頂部模塊[如：功能按鈕、搜索面板] -->
</div>
 
<div class="bjui-pageContent">
	<!-- 內容區 -->
</div>
 
<div class="bjui-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-noinit="true"]，該容器內的元素都不會被初始化，處理這個流程就監聽了本件事。
bjui.afterInitUI	框架初始化後事件	監聽該事件，能夠在框架初始化後進行相關操做，示例同上。
bjui.ajaxStatus	ajax請求狀態事件	框架內部事件。本事件用於在ajax請求過程當中（ajaxStart - > ajaxStop），顯示/隱藏 框架的Mask loading效果。
bjui.resizeGrid	窗口縮放事件	監聽該事件，可在瀏覽器窗口或dialog窗口縮放時進行相關操做。
bjui.beforeAjaxLoad	ajax載入前事件	監聽該事件，可在使用ajaxUrl方法 (navtab/dialog均用此方法加載子頁片內容) 前進行相關操做，例如：本框架監聽該事件用於在重載入子頁片前釋放在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，以下面的代碼將實現同上面data屬性一致的效果。

<button type="button" class="btn-default" onclick="alertmsg_onclick();">信息提示</button>
<script type="text/javascript">
function alertmsg_onclick() {
    BJUI.alertmsg('info', '我是一個普通的信息提示！')
}
</script>

 

url動態賦值

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對象下的字符串函數名轉換，示例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'
})

參數

名稱	類型	默認值	描述
id	string	undefined	[必選] 標籤的ID，若是指定重複，將覆蓋現有的ID相同標籤。
title	string	New tab	[可選] 標籤打開後顯示的名稱。
url	string	undefined	[必選] D-Url 請求數據的url，a連接觸發時能夠將url定義在href屬性。
external	boolean	false	[可選] 是否以iframe方式加載外部頁面。
type	string	GET	[可選] Http請求方式，可選‘GET/POST’。
data	object	{}	[可選] 請求url時，須要發送的data數據。
loadingmask	boolean	true	[可選] ajax請求時是否顯示數據加載遮罩。
fresh	boolean	false	[可選] 是否保持該navtab的新生狀態，表如今重複打開該navtab時，是否從新載入內容。
reloadWarn	string	null	[可選] 當準備在已存在的navtab上加載內容時的確認提示信息。
autorefresh	boolean/int(秒)	false	[可選] 指定該navtab是否可自動刷新，爲true時默認間隔15秒自動刷新，指定具體的秒數則以指定的間隔秒值自動刷新。
onLoad	function($navtab)	null	[可選] navtab加載完成後的事件回調，回調函數的參數$navtab爲該navtab內容區的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默認參數	從新載入某個標籤，若是未指定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 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'
})

參數

名稱	類型	默認值	描述
id	string	dialog	[必選] 彈窗的ID，若是指定重複，將覆蓋現有的ID相同彈窗。
title	string	New Dialog	[可選] 彈窗打開後顯示的名稱，可從data-title屬性獲取或直接獲取觸發DOM的text值。
url	string	undefined	[可選] 參數url、image、html、target必選一項，優先級url > image > html > target。 D-Url 請求數據的url，a連接觸發時能夠將url定義在href屬性。
image	string	null	[可選] 圖片地址，讓dialog顯示該圖片，image參數可使用encodeURI函數編碼。
html	string	null	[可選] 指定一段html內容加載到dialog。
target	selector	null	[可選] 從指定的jQuery容器中加載內容到dialog，請爲該容器添加屬性data-noinit="true"以阻止容器中的內容提早初始化，爲容器添加Class[hide]以隱藏待加載內容。
type	string	GET	[可選] Http請求方式，可選‘GET/POST’。
data	object	{}	[可選] 請求url時，須要發送的data數據。
loadingmask	boolean	true	[可選] ajax請求時是否顯示數據加載遮罩。
width	int	500	[可選] 彈窗的寬度。
height	int	300	[可選] 彈窗的高度。
max	boolean	false	[可選] 打開彈窗時直接最大化。
mask	boolean	false	[可選] 是否模態窗口。
resizable	boolean	true	[可選] 能夠調整彈窗的大小。
drawable	boolean	true	[可選] 能夠拖動彈窗。
maxable	boolean	true	[可選] 是否顯示最大化按鈕。
minable	boolean	true	[可選] 是否顯示最小化按鈕（模態彈窗無效）。
fresh	boolean	false	[可選] 是否保持該dialog的新生狀態，表如今重複打開該dialog時，是否從新載入內容。
reloadWarn	string	null	[可選] 當準備在已存在的dialog上加載內容時的確認提示信息。
onLoad	function($dialog)	null	[可選] dialog加載完成後的事件回調，回調函數的參數$dialog爲該dialog的jQuery對象。
beforeClose	function($dialog)	null	[可選] 返回值: boolean。 dialog關閉前的事件回調，返回true則關閉，返回false不關閉。
onClose	function()	null	[可選] dialog關閉後的事件回調。

方法

方法名	參數類型	參數說明	描述
switchDialog(id)	string	dialog ID	切換到某個彈窗(模態彈窗無效)。
refresh(id)	string	dialog ID	刷新某個彈窗。
reloadFlag(tabids)	string	一個或多個標籤ID，多個ID以,分隔	爲某(幾)個標籤設定重載標記(當切換到該標籤時從新載入)。
reload(options)	object	同dialog默認參數	從新載入某個彈窗，若是未指定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', '你點擊了肯定按鈕！')
    }
})

 

參數

名稱	類型	默認值	描述
type	string	null	[必選] 信息提示方式，參數有['ok' | 'correct' | 'info' | 'warn' | 'error' | 'confirm' | 'prompt' ]，其中ok爲correct的別名，confirm爲確認提示，prompt爲輸入信息提示。
msg	string	null	[必選] 提示的內容。
displayPosition	string	topcenter	[可選] 提示框顯示位置，參數有['topleft' | 'topcenter' | 'topright' | 'middleleft' | 'middlecenter' | 'middleright' | 'bottomleft' | 'bottomcenter' | 'bottomright']，本參數能夠覆蓋全局設置。
displayMode	string	slide	[可選] 提示框顯示動畫(無動畫、漸顯漸隱、滑動)，參數['none' | 'fade' | 'slide']，本參數能夠覆蓋全局設置。
autoClose	boolean	null	[可選] 是否自動關閉提示框，默認在type爲['ok' | 'correct' | 'info']三種方式時參數值爲true。
alertTimeout	int	null	[可選] 自動關閉提示框的時間(毫秒)，autoClose參數爲true時生效，本參數能夠覆蓋全局設置。
mask	boolean	null	[可選] 是否模態顯示提示框，默認在type爲['warn' | 'error' | 'confirm' | 'prompt']方式時參數值爲true。
title	string	見bjui-regional.zh-CN.js中alertmsg	[可選] 信息提示框的標題，設置本參數將會覆蓋bjui-regional.zh-CN.js中alertmsg的對應設置。
okName	string	肯定	[可選] 肯定按鈕的名稱，設置本參數將會覆蓋bjui-regional.zh-CN.js中alertmsg的對應設置。
cancelName	string	取消	[可選] 僅type爲'confirm'時有效取消按鈕的名稱，設置本參數將會覆蓋bjui-regional.zh-CN.js中alertmsg的對應設置。
okCall	function()	null	[可選] 肯定按鈕的回調方法，支持字符串類型的方法名，該方法會在提示框關閉後被調用。
cancelCall	function()	null	[可選] 僅type爲'confirm'時有效取消按鈕的回調方法，支持字符串類型的方法名，該方法會在提示框關閉後被調用。
promptRequired	string	required	[可選] 僅type爲'prompt'時有效，輸入提示框的驗證規則。
promptname	object	prompt	[可選] 僅type爲'prompt'時有效，輸入提示框的name屬性。
promptval	string	null	[可選] 僅type爲'prompt'時有效，輸入提示框的默認值。
prompt	object	null	[可選] 僅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 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))
    }
})

參數：

名稱	類型	默認值	描述
url	string	null	[必選] D-Url ajax處理的URL，a連接觸發時能夠將url定義在href屬性。
type	string	POST	[可選] ajax請求方式。
data	object	null	[可選] ajax請求發送到服務器的數據。
confirmMsg	string	null	[可選] 執行動做前的確認提示。
okalert	boolean	true	[可選] 請求正常返回後，是否彈出相應的信息提示，當返回內容不是B-JUI消息JSON時，建議關閉。
callback	function(json)	null	[可選] 自定義回調函數。
okCallback	function(json, options)	null	[可選] 請求成功時的回調函數，該函數會覆蓋B-JUI默認的成功回調函數，函數的options參數便是該doajax的options參數。
okAfterCallback	function(json, options)	null	[可選] 請求成功時的回調函數，該函數會在B-JUI默認的成功函數後執行，函數的options參數便是該doajax的options參數。
errCallback	function(json, options)	null	[可選] 請求失敗時的回調函數，函數的options參數便是該doajax的options參數。
failCallback	function(msg, options)	null	[可選] ajax請求出錯時的回調函數，函數的msg參數是服務端返回的出錯信息，options參數便是該doajax的options參數。
loadingmask	boolean	false	[可選] ajax請求時是否顯示數據加載遮罩。
target	selector	null	[可選] 數據加載遮罩的父容器，值爲空時默認是當前Navtab或Dialog。
reload	boolean	false	[可選] 請求返回成功狀態後，是否從新加載當前target。
forward	string	null	[可選] 跳轉地址，請求返回成功狀態後，加載forward地址對應的內容到當前target。
forwardConfirm	boolean	false	[可選] 請求返回成功狀態後，是否從新加載當前target。
closeCurrent	boolean	false	[可選] 請求返回成功狀態後，是否關閉當前target(僅navtab或dialog)。
tabid	string	null	[可選] 請求返回成功狀態後，須要刷新的navtab的id集合，多個id以,分隔。
dialogid	string	null	[可選] 請求返回成功狀態後，須要刷新的dialog的id集合，多個id以,分隔。
divid	string	null	[可選] 請求返回成功狀態後，須要刷新的div(僅限經過doload加載的div)的id集合，多個id以,分隔。
datagrids	string	null	[可選] 請求返回成功狀態後，須要刷新的datagrid的id集合，多個id以,分隔。
gridrefreshflag	boolean	true	[可選] 刷新datagrid時保留其快速篩選、排序、分頁信息。
ajaxTimeout	int	BJUI.ajaxTimeout	[可選] 請求超時設置，即$.ajax的timeout屬性。

請求返回成功狀態

指服務端返回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))
    }
})

參數：

名稱	類型	默認值	描述
url	string	null	[必選] 提交的URL，未指定時將取form的action屬性。
type	string	POST	[可選] ajax請求方式，未指定該參數時會取form的method屬性值。
confirmMsg	string	null	[可選] 提交表單前的確認提示。
beforeSubmit	function(form)	null	[可選] 執行動做前的確認函數，返回false時不提交表單。
validate1.31	boolean	true	[可選] 提交表單前是否須要驗證（須要驗證插件nicevalidate支持）。
alertmsg	boolean	false	[可選] 是否彈出驗證未經過的信息提示。
okalert	boolean	true	[可選] 請求正常返回後，是否彈出相應的信息提示。
callback	function(json)	null	[可選] 自定義回調函數。
okCallback	function(json, options)	null	[可選] 請求成功時的回調函數，該函數會覆蓋B-JUI默認的成功回調函數，函數的options參數便是該doajax的options參數。
okAfterCallback	function(json, options)	null	[可選] 請求成功時的回調函數，該函數會在B-JUI默認的成功函數後執行，函數的options參數便是該doajax的options參數。
errCallback	function(json, options)	null	[可選] 請求失敗時的回調函數，函數的options參數便是該doajax的options參數。
failCallback	function(msg, options)	null	[可選] ajax請求出錯時的回調函數，函數的msg參數是服務端返回的出錯信息，options參數便是該doajax的options參數。
form	selector	null	[可選] 要提交的表單，經過JS API使用時須要。
loadingmask	boolean	true	[可選] ajax請求時是否顯示數據加載遮罩。
target	selector	null	[可選] 數據加載遮罩的父容器，值爲空時默認是當前Navtab或Dialog。
reload	boolean	false	[可選] 請求返回成功狀態後，是否從新加載當前target。
forward	string	null	[可選] 跳轉地址，請求返回成功狀態後，加載forward地址對應的內容到當前target。
forwardConfirm	boolean	false	[可選] 請求返回成功狀態後，是否從新加載當前target。
closeCurrent	boolean	false	[可選] 請求返回成功狀態後，是否關閉當前target(僅navtab或dialog)。
tabid	string	null	[可選] 請求返回成功狀態後，須要刷新的navtab的id集合，多個id以,分隔。
dialogid	string	null	[可選] 請求返回成功狀態後，須要刷新的dialog的id集合，多個id以,分隔。
divid	string	null	[可選] 請求返回成功狀態後，須要刷新的div(僅限經過doload加載的div)的id集合，多個id以,分隔。
datagrids	string	null	[可選] 請求返回成功狀態後，須要刷新的datagrid的id集合，多個id以,分隔。
gridrefreshflag	boolean	true	[可選] 刷新datagrid時保留其快速篩選、排序、分頁信息。
ajaxTimeout	int	BJUI.ajaxTimeout	[可選] 請求超時設置，即$.ajax的timeout屬性。

請求返回成功狀態

指服務端返回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'
})

參數：

名稱	類型	默認值	描述
target	selector	null	[必選] 目標容器的 jQuery選擇器表達式 或 DOM對象。
url	string	null	[必選] D-Url 遠程加載的URL，a連接觸發時能夠將url定義在href屬性。
type	string	GET	[可選] ajax請求方式。
data	object	null	[可選] ajax請求發送到服務器的數據。
autorefresh	boolean/int(秒)	null	[必選] 指定該div容器是否可自動刷新，爲true時默認間隔15秒自動刷新，指定具體的秒數則以指定的間隔秒值自動刷新。
callback	function(json)	null	[可選] 加載成功後的回調函數。
loadingmask	boolean	true	[可選] ajax請求時是否顯示數據加載遮罩。
ajaxTimeout	int	BJUI.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 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
})

參數：

名稱	類型	默認值	描述
url	string	null	[必選] D-Url 下載的URL。
type	string	GET	[可選] ajax請求方式。
data	object	null	[可選] 發送到服務器的數據。
target	selector	null	[可選] 數據加載遮罩的父容器，值爲空時默認是當前Navtab或Dialog。
loadingmask	boolean	false	[可選] ajax請求時是否顯示數據加載遮罩。
confirmMsg	string	null	[可選] 下載前的確認提示。
failCallback	function(responseHtml, url)	B-JUI框架提示及取消loadingmask遮罩效果。	[可選] ajax請求失敗時的回調函數。
prepareCallback	function(url)	根據loadingmask參數加載遮罩。	[可選] ajax請求中的回調函數。
successCallback	function(url)	取消loadingmask遮罩效果。	[可選] ajax請求成功的回調函數。

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
})

參數：

名稱	類型	默認值	描述
url	string	null	[必選] 提交的URL，未指定時將取form的action屬性。
type	string	POST	[可選] ajax請求方式，未指定該參數時會取form的method屬性值。
beforeSubmit	function(form)	null	[可選] 執行動做前的確認函數，返回false時不提交表單。
validate	boolean	true	[可選] 提交表單前是否須要驗證（須要驗證插件nicevalidate支持）。
alertmsg	boolean	false	[可選] 是否彈出驗證未經過的信息提示。
searchDatagrid	selector	null	[可選] 將form域中的信息用來搜索指定datagrid，若是有該參數，則參數okalert以後的參數都無效。
form	selector	null	[可選] 要提交的表單，經過JS API使用時須要。
loadingmask	boolean	true	[可選] ajax請求時是否顯示數據加載遮罩。
target	selector	null	[可選] 數據加載遮罩的父容器，值爲空時默認是當前Navtab或Dialog。
okalert	boolean	true	[可選] 請求正常返回後，是否彈出相應的信息提示。
callback	function(json)	null	[可選] 自定義回調函數。
okCallback	function(json, options)	null	[可選] 請求成功時的回調函數，該函數會覆蓋B-JUI默認的成功回調函數，函數的options參數便是該doajax的options參數。
okAfterCallback	function(json, options)	null	[可選] 請求成功時的回調函數，該函數會在B-JUI默認的成功函數後執行，函數的options參數便是該doajax的options參數。
errCallback	function(json, options)	null	[可選] 請求失敗時的回調函數，函數的options參數便是該doajax的options參數。
failCallback	function(msg, options)	null	[可選] ajax請求出錯時的回調函數，函數的msg參數是服務端返回的出錯信息，options參數便是該doajax的options參數。
reload	boolean	false	[可選] 請求返回成功狀態後，是否從新加載當前target。
forward	string	null	[可選] 跳轉地址，請求返回成功狀態後，加載forward地址對應的內容到當前target。
forwardConfirm	boolean	false	[可選] 請求返回成功狀態後，是否從新加載當前target。
closeCurrent	boolean	false	[可選] 請求返回成功狀態後，是否關閉當前target(僅navtab或dialog)。
tabid	string	null	[可選] 請求返回成功狀態後，須要刷新的navtab的id集合，多個id以,分隔。
dialogid	string	null	[可選] 請求返回成功狀態後，須要刷新的dialog的id集合，多個id以,分隔。
divid	string	null	[可選] 請求返回成功狀態後，須要刷新的div(僅限經過doload加載的div)的id集合，多個id以,分隔。
datagrids	string	null	[可選] 請求返回成功狀態後，須要刷新的datagrid的id集合，多個id以,分隔。
gridrefreshflag	boolean	true	[可選] 刷新datagrid時保留其快速篩選、排序、分頁信息。
ajaxTimeout	int	BJUI.ajaxTimeout	[可選] 請求超時設置，即$.ajax的timeout屬性。

請求返回成功狀態

指服務端返回B-JUI的消息JSON並在json[BJUI.keys.statusCode] == BJUI.statusCode.ok時有效。

Datagrid

Datagrid，即數據表格，是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'}">建立時間</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'}
    ]
})

參數

名稱	類型	默認值	描述
gridTitle	string	null	[可選] 標題。
columns	array	null	[可選] 表頭模型，適用動態生成表頭，若是未設置本參數，將自動轉化靜態表頭爲模型。詳細請查看columns參數
data	array	null	[可選] 提供datagrid須要的數據，若是同時設置有dataUrl參數，本參數優先級高。
dataUrl	string	null	[可選] 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配置。
postData	object	{}	[可選] ajax請求發送到服務器的數據。
loadType	string	POST	[可選] Ajax請求方式。
dataType	string	json	[可選] 數據類型，可選參數['json' | 'array' | 'xml']。
hiddenFields	array	null	[可選] dataType='array'有效隱藏字段，能夠將不能加載到頁面上的值設置到給定的字段，array數據除去表頭的列後依次賦值。
local	string	remote	[可選] 處理數據方式，可選參數['local' | 'remote']，(影響（分頁、排序、篩選）)。
fieldSortable	boolean	true	[可選] 點擊頁頭字段快速排序。普通表格轉爲datagrid的，需設置dataUrl參數，local = 'remote'
filterThead	boolean	true	[可選] 容許表格頭部快速篩選。普通表格轉爲datagrid的，需設置dataUrl參數，local = 'remote'
sortAll	boolean	false	[可選] 排序範圍，true = 全部數據排序， false = 當前頁數據排序。普通表格轉爲datagrid的，默認爲true
filterAll	boolean	false	[可選] 篩選範圍，true = 從全部數據中篩選，false = 從當前頁數據中篩選。普通表格轉爲datagrid的，默認爲true
filterMult	boolean	true	[可選] 支持多字段篩選。
initFilter	object	{}	[可選] 初始化字段篩選。
linenumberAll	boolean	false	[可選] 行號範圍，true = 爲全部數據編號，false = 爲當前頁數據編號。
showLinenumber	boolean/ string	true	[可選] 是否顯示行號，參數[true | false | 'lock']，lock參數 = 鎖定行號列（適用於多列字段，出現橫向滾動條的狀況）。
showCheckboxcol	boolean/ string	false	[可選] 是否顯示行復選框，參數同上。
showEditbtnscol	boolean	false	[可選] 是否顯示編輯按鈕列。
showToolbar	boolean	false	[可選] 是否顯示工具條，須要設置參數toolbarItem或toolbarCustom。
showNoDataTip	boolean/string	true	[可選] 沒有獲取到數據時顯示的提示信息。可選參數[true | false，'自定義提示']，true = 框架默認提示['沒有數據！'], false = 不顯示。
toolbarItem	string	null	[可選] 顯示工具條按鈕，可選參數['all, add, edit, cancel, save, del, import, export, exportf, |']，「all」 = 顯示全部按鈕，「|」 = 按鈕組分隔符。
toolbarCustom	string/ object/ function	null	[可選] 自定義的html內容或jQuery DOM對象，支持帶返回值函數。
columnResize	boolean	true	[可選] 容許調整列寬。
columnMenu	boolean	true	[可選] 表頭字段列上顯示菜單按鈕。
columnShowhide	boolean	true	[可選] 表頭字段列菜單上出現 「顯示/隱藏 列」 選項。
columnFilter	boolean	true	[可選] 表頭字段列菜單上出現 「過濾」 選項。
columnLock	boolean	true	[可選] 表頭字段列菜單上出現 「鎖定列、解除鎖定」 選項。
paging	boolean/ object	true	[可選] 是否顯示分頁組件，可設置分頁參數。分頁參數模板： {pageSize:30, selectPageSize:'30,60,90', pageCurrent:1, showPagenum:5, totalRow:0} 若是local='remote'，並經過dataUrl參數請求json數據時，返回的數據要提供totalRow、pageCurrent參數，可提供pageSize參數  注意：分頁參數totalRow、pageCurrent、pageSize的key值引用的框架初始化時的pageInfo配置。
pagingAlign	string	center	[可選] 分頁組件對齊方式，參數['left' | 'center' | 'right']
keys	object	[可選] 提交編輯數據時須要移除的數據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	[可選] 子表參數。 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 }
isTree	boolean	false	[可選] 是否樹型表。
treeOptions	object	[可選] 樹型表參數。 1 { 2 keys : { 3 key : 'id', // id 4 parentKey : 'pid', // 父id 5 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 }
dropOptions	object	[可選] 拖動參數。 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 }
tdTemplate	string/ function(data)	null	[可選] 格式化表格的數據模板，需配合參數templateWidth，當檢測到窗口寬度小於templateWidth，就用tdTemplate模板格式化行數據。模板字符串示例："<div><h1>標題：{#title}</h1><p>內容：{#content}</p></div>"，使用{#字段key }能夠替換當前行數據對應字段值。function示例：function(data) {return '<div><h1>標題：'+ data.title +'</h1><p>內容：'+ data.content +'</p></div>' }
templateWidth	int	600	[可選] 當表格寬度小於設定值時，根據templateWidth參數格式化行數據。當值設爲0時1.31，始終以自定義模板方式顯示。推薦將參數值與參數dialogFilterW設置一致，以達到最佳效果。
dialogFilterW	int	360	[可選] 當表格寬度小於設定值時，將表頭的快速篩選更換爲dialog模式。當值設爲0時1.31，表頭將固定爲dialog模式。
editUrl	string	null	[可選] 保存編輯、添加數據的url，Ajax請求方式爲POST，服務器端接收的參數名稱爲"json"，數據類型是JSON Array。editUrl支持行數據動態賦值，賦值id的例子：{editUrl:'news/edit?id={id}'}，{id}部分會自動替換爲該行數據的ID字段值。
editCallback	function(json)	null	[可選] 保存成功後的回調，返回的json內容能夠是B-JUI默認的回調json或保存後的json數據，datagrid默認回調：若是返回保存後的json數據，將會更新對應的數據行。
editMode	string/ object	inline	[可選] 編輯、添加數據的方式，參數[false | 'inline' | 'dialog']。false = 不能編輯，inline = 行內編輯，dialog = 彈窗編輯。自定義dialog方式：{dialog:{dialog參數}}，自定義navtab方式：{navtab:{navtab參數}}
editDialogOp	object	null	[可選] 彈窗編輯方式時，設置彈出窗口的參數，如{width:500, height:300, mask:false}
inlineEditMult	boolean	true	[可選] 容許行內編輯模式下同時添加/編輯多行。
saveAll	boolean	true	[可選] 適用於多行行內編輯時，一次性保存所有數據，發送到服務器端數據格式見參數editUrl。
addLocation	string	first	[可選] 添加新行數據於當前頁的位置，參數['first' | 'last' | 'prev' | 'next']，參數prev和next參考當前選中行位置。
delUrl	string	null	[可選] 刪除數據的url，服務器端接收的數據見參數delPK
delType	string	POST	[可選] Ajax刪除數據的請求方式。
delPK	string	null	[可選] 設置刪除主鍵名，若是設置了主鍵，則只發送該字段的值(刪除多條則主鍵值以逗號分隔)到服務器端，不然發送JSON數據（參數名"json"，數據類型爲JSON Array）。
delConfirm	boolean/ string	null	[可選] 刪除前的確認提示，參數[true | false | '自定義提示信息']，參數爲false時不彈出提示信息。
delCallback	function(json)	null	[可選] 刪除成功後的回調函數，返回的json內容爲B-JUI默認的回調json。
jsonPrefix	string	null	[可選] 發送到服務器端的json數據(name)加前綴，包括(保存、刪除、篩選)操做。
contextMenuH	boolean	true	[可選] 在表頭上右鍵點擊時出現 」顯示/隱藏列「 的快捷菜單。
contextMenuB	boolean	false	[可選] 在數據行右鍵點擊時出現快捷菜單，菜單選項有(刷新、添加、編輯、取消、刪除)。
hScrollbar	boolean	false	[可選] 容許出現橫向滾動條。
width	int/percent	null	[可選] datagrid容器寬度，默認爲父容器的寬，至關於'100%'。
tableWidth	int/percent	null	[可選] 表格的寬度，默認是各列寬度之和。
height	int/percent	300	[可選] datagrid容器高度。
importOption	object	null	[可選] 工具欄的導入按鈕參數，dialog或navtab方式打開導入頁面，參數模板{type:"dialog", options:{url:'', width:400, height:200}}
exportOption	object	null	[可選] 工具欄的導出按鈕參數，執行ajax url或以dialog or navtab方式打開導出頁面，參數模板{type:"ajax", options:{url:""}}
beforeEdit	function	null	[可選] 帶返回值方法，編輯數據前調用，返回true繼續編輯，返回false取消編輯。
beforeDelete	function	null	[可選] 帶返回值方法，刪除數據前調用，返回true繼續刪除，返回false取消刪除。
afterSave	function($trs, datas)	null	[可選] 保存成功後執行方法，參數$trs爲保存行(jQuery 對象)，datas爲保存行對應數據(JSON Array)。
afterDelete	function	null	[可選] 刪除成功後執行方法。

columns參數

名稱	類型	默認值	描述
name	string	null	[可選] 該列字段名(關聯json數據、xml數據、編輯及保存的數據)。未設置name將不能進行添加\編輯\快速篩選\排序等操做
label	string	null	[可選] 顯示的列標題。
width	int	auto	[可選] 列寬。
align	string	left	[可選] 對齊方式(left、center、right)。
type	string	string	[可選] 數據類型(string、boolean、select、textarea、date、findgrid、spinner、tags)。
align	string	left	[可選] 對齊方式(left、center、right)。
add	boolean	true	[可選] 容許該列添加數據。
edit	boolean	true	[可選] 容許該列編輯數據。
attrs	object	null	[可選] 編輯時，表單域的附加參數。示例：{readonly:'readonly'}
rule	string	null	[可選] 編輯時，表單域名的驗證規則。示例：required;length(6)
items	array/function	null	[可選] 用於數據渲染或篩選\編輯時的select填充。array示例：[{'true':'男'}, {'false':'女'}],；array示例21.31：[{"sex":true, "name":"男"}, {"sex":false, "name":"女"}]，需配合參數itemattr使用；function示例：function() {return $.getJSON('/datagrid/demo-items-state.js')}
itemattr1.31	object	null	[可選] 用於正確獲取items參數的內容。如items的array示例2，本參數設置爲：{value:'sex',label:'name'}
render	function(value, data)	null	[可選] 將列數據渲染成其餘樣式，方法參數value爲datagrid數據提供的原始值。組合顯示示例：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	[可選] 列上是否出現菜單按鈕（若是是多表頭，僅對字段列有效）。
lock	boolean	false	[可選] 是否鎖定該列(儘可能不用，影響速度)。
quicksort	boolean	true	[可選] 容許點擊該列進行快速排序。
quickfilter	boolean	true	[可選] 容許該列進行表頭快速篩選。
finalWidth	boolean	false	[可選] 固定該列的寬度，不受內容多少變動寬度。

方法

方法名	參數類型	參數說明	描述
refresh(filterFlag)	boolean	true = 保留篩選、排序、分頁數據，false = 不保留	刷新，從新加載數據。
reload(options)	object	同datagrid的options	重載，使用新的options對應覆蓋舊的options，生成一個新的datagrid，若是新的options有參數columns，將會直接替換舊的columns。
filter(data)1.31	object	須要篩選的數據	快速篩選，以新提供的數據覆蓋postData參數，從新向服務端請求數據，能夠經過data提供boolean參數clearOldPostData，使框架保留或取消原有的postData參數。篩選name示例：$().datagrid('filter', {name:'張三'})
refreshParent(filterFlag)	boolean	true = 保留父表的篩選、排序、分頁數據，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/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]	單個數據行的索引、逗號分隔的行索引字符串、數據行的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)	string	'first' | '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')	object	datagrid參數{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 id="findgrid1" type="text" name="obj.xm" value="" data-toggle="findgrid" 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:'建立日期'}
        ]
    }
})

　　

參數

名稱	類型	默認值	描述
pk	string	null	[可選] 行數據的主鍵值，當打開Findgrid窗口時，用來標記已選中項。
oldData	string/array	null	[可選] 對應pk參數的值，參數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對應的數據行的key是xm，那能夠寫做name:xm,sex，冒號前面是input的name，即將datagrid選中行的xm字段值賦值到obj.name域。
exclude	string	null	[可選] 與include相反，排除要賦值的input名稱集合。注意：若是已設置include參數，則本參數無效。
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彈窗參數，請參考dialog參數設置。
gridOptions	object	{width:'100%',height:'100%',tableWidth:'100%',columnMenu:false}	[必選] 請參考datagrid參數。
context	selector	當前dialog或navtab	[可選] 僅在指定的容器中查找待賦值input。
beforeSelect	function(data)	null	[可選] 選中數據行時的事件回調函數，返回boolean，true = 繼續執行，false = 取消賦值。
onSelect	function(data)	null	[可選] 該函數用於替換Findgrid默認的賦值操做，data參數爲選中行數據，單選時類型爲object，多選時爲array。
afterSelect	function(data)	null	[可選] Findgrid的賦值操做完成後的回調函數。

分頁組件1.31

分頁組件Pagination，當觸發頁面跳轉時，能夠自定義回調函數或經過指定的form提交相應參數到服務端處理。

使用

經過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'
})

　　

參數

名稱	類型	默認值	描述
width	int/percent	100%	[可選] 分頁組件的寬度。
pageSize	int	30	[可選] 頁碼大小。
selectPageSize	string	'30,60,90'	[可選] 可供選擇的頁碼大小集合。
pageCurrent	int	1	[可選] 當前頁碼。
total	int	0	[可選] 總記錄數。
showPagenum	int	5	[可選] 可供點擊的頁碼個數。
form	selector	null	[可選] 觸發頁碼跳轉時向該form寫入pageCurrent及pageSize參數，並提交該form。
callback	function(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/21
v1.3 beta2	點我下載	2016/01/06
v1.3.beta	點我下載	2015/12/31
v1.2	點我下載	2015/05/22