实践B-JUI

Posted on | In | Visitors

B-JUI(Best jQuery UI)，一个前端框架，适用于配置管理类的应用。借鉴DWZ，SPA架构，ajax，基于Bootstrap，实现自适应（响应式）。与bootstrap不同，不需要提前把组件的ui写好并隐藏起来（也有一个好处，就是更加自主控制组件的ui）。

核心思想

data-api

data-toggle：目标组件，比如navtab，dialog等 data-options：参数，json格式

菜单

左侧菜单

json格式，支持多级，例如：

1
2
3
4
5
6
7
8
9
10
11
12
[
    {"name":"表单相关", "children":[
        {"id":"base-button", "name":"按钮", "target":"navtab", "url":"html/form/button.html"},
        {"id":"base-input", "name":"文本框", "target":"navtab", "url":"html/form/input.html"},
        {"name":"综合应用", "children":[
            {"id":"base-demo-form", "name":"表单示例", "target":"navtab", "url":"form.html"}
        ]}
    ]},
    {"name":"综合应用", "children":[
        {"id":"base-demo-form", "name":"表单示例", "target":"navtab", "url":"form.html"}
    ]}
]

顶级父菜单格式如下，可以包含父菜单和菜单

1
2
3
[
  
]

父菜单格式，可以包含父菜单和菜单

1
2
3
{"name":"表单相关", "children":[
  
]}

菜单格式：

1
{"id":"base-button", "name":"按钮", "target":"navtab", "url":"html/form/button.html"}

表单相关

按钮

文本框

下拉选择框

单选、复选框

日期选择器

tags、自动完成

Suggest

FindGrid

Spinner

基础组件

tab页

data-api

样例：

1
2
3
<p><button type="button" class="btn-default" data-toggle="navtab" data-options="{id:'test_navtab1', url:'navtab-demo1.html', title:'示例Navtab1'}">打开Navtab1</button></p>

<p><a href="navtab-demo2.html" data-toggle="navtab" data-options="{id:'test_navtab2', title:'示例Navtab2'}">打开Navtab2</a></p>
javascript

样例：

1
2
3
4
5
6
7
8
9
10
<p><button type="button" class="btn-blue" onclick="navtab_test();">打开Navtab3</button></p>
<script type="text/javascript">
function navtab_test() {
    BJUI.navtab({
        id:'test_navtab3',
        url:'../../html/base/navtab-demo3.html',
        title:'示例Navtab3'
    })
}
</script>
方法
方法名 参数类型 参数说明 描述
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() – – 关闭所有标签。

方法使用示例：

1
2
// 刷新ID为 navtab-test-1 的Navtab
BJUI.navtab('refresh', 'navtab-test-1')
参数
名称 类型 默认值 描述
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关闭后的事件回调。

dialog

对话框

data-api
1
2
3
4
5
6
7
8
<p><button type="button" class="btn-default" data-toggle="dialog" data-options="{id:'test_dialog1', url:'../../html/base/dialog-demo1.html', title:'示例Dialog1'}">打开Dialog1</button></p>

<p><a href="../../html/base/dialog-demo2.html" data-toggle="dialog" data-options="{id:'test_dialog2', title:'示例Dialog2'}">打开Dialog2</a></p>


<p><button type="button" class="btn-default" data-toggle="dialog" data-options="{id:'test_dialog6', url:'../../html/base/dialog-demo1.html', title:'模态Dialog', width:800, height:500, mask:true}">模态Dialog</button></p>

<p><button type="button" class="btn-default" data-toggle="dialog" data-options="{id:'test_dialog7', url:'../../html/base/dialog-demo1.html', title:'最大化Dialog', max:true}">最大化Dialog</button></p>
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<p><button type="button" class="btn-blue" onclick="dialog_test1();">打开Dialog3(JS API)</button></p>

<p><button type="button" class="btn-green" onclick="dialog_test2();">打开Dialog4(html)</button></p>

<p><button type="button" class="btn-orange" onclick="dialog_test3();">打开Dialog5(image)</button></p>

<script type="text/javascript">
function dialog_test1() {
    BJUI.dialog({
        id:'test_dialog3',
        url:'../../html/base/dialog-demo3.html',
        title:'示例Dialog3'
    })
}
function dialog_test2() {
    BJUI.dialog({
        id:'test_dialog4',
        html:'<div style="margin:15px auto; padding:15px; width:300px; border:2px #ff6600 solid;"><h4 class="text-center">测试dialog加载html</h4></div>',
        title:'示例Dialog4'
    })
}
function dialog_test3() {
    BJUI.dialog({
        id:'test_dialog5',
        width: 200,
        height: 220,
        html: '<div> 我是html</div>',
        image:'../../../assets/ico/apple-touch-icon-precomposed.png.png',
        title:'示例Dialog5'
    })
}
</script>
方法

| 方法名 | 参数类型 | 参数说明 | 描述 | | —————— | —— | ——————– | —————————– | | 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() | – | – | 关闭当前弹窗。 | 方法使用示例：

1
2
    // 刷新ID为 dialog-test-1 的Dialog
    BJUI.dialog('refresh', 'dialog-test-1')
参数
名称 类型 默认值 描述
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关闭后的事件回调。

alertmsg

信息提示组件，6种

data-api
1
2
3
4
5
6
<p><button type="button" class="btn-default" data-toggle="alertmsg" data-options="{type:'info', msg:'我是一个普通的信息提示！'}">信息提示</button></p>
<p><button type="button" class="btn-green" data-toggle="alertmsg" data-options="{type:'ok', msg:'我是一个成功的信息提示！', displayPosition:'middlecenter'}">成功提示</button></p>
<p><button type="button" class="btn-orange" data-toggle="alertmsg" data-options="{type:'warn', msg:'我是一个警告的信息提示！'}">警告提示</button></p>
<p><button type="button" class="btn-red" data-toggle="alertmsg" data-options="{type:'error', msg:'我是一个错误的信息提示！'}">错误提示</button></p>
<p><button type="button" class="btn-blue" data-toggle="alertmsg" data-options="{type:'confirm', msg:'你确定要执行该操作吗！', okCall:function(){alert('你点了确定！');}}">确认提示</button></p>
<p><button type="button" class="btn-orange" data-toggle="alertmsg" data-options="{type:'prompt', msg:'请输入你要告诉我的内容', prompt:{url:'../../json/ajaxDone.json'}}">提示消息框</button></p>
javascript
1
2
// 原型，options参见参数部分（除去type和msg参数）
BJUI.alertmsg(string type, string msg, object options)

样例：

1
2
3
4
5
6
7
8
9
10
11
<p><button type="button" class="btn-default" onclick="alertmsg_test();">JS API示例</button></p>
<script type="text/javascript">
function alertmsg_test() {
    BJUI.alertmsg('ok', '我是一个成功的消息提示！', {
      	displayPosition:'middlecenter',
        okCall: function() {
            BJUI.alertmsg('info', '你点击了确定按钮！')
        }
    })
}
</script>
参数
名称 类型 默认值 描述
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参数，则该参数无效。

ajax相关（bjuiajax）

bjuiajax是B-JUI封装的一系列ajax异步请求。

设置了okCallback等回调则target就不刷新，否则target会刷新？

B-JUI消息JSON

当ajax请求时，服务端可以仅返回一个消息JSON告知前端框架处理的结果，这个JSON的格式如下：

1
2
3
4
    {
        "statusCode" : 200,
        "message" : "处理成功！"
    }

消息JSON的参数：key（statusCode、message）可以在框架初始化时通过参数keys更改，statusCode的状态值有ok、error、timeout，代表成功、失败、超时三种类型【当statusCode没有或无法匹配上时取成功信息】，可以通过参数statusCode更改。【message不能为空】

doajax

Ajax提交，异步请求

data-api

样例：

1
<button type="button" class="btn-green" data-toggle="doajax" data-options="{url:'json/ajax/ajax-test1.json', callback:ajax_test1}">Data API Ajax提交2（带回调）</button>
javascript

样例：

1
2
3
4
5
6
7
    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 [可选] 请求正常返回后，是否弹出相应的信息提示【alertmsg】，当返回内容不是B-JUI消息JSON时，建议关闭【即使为true也不会弹出】。【如果配置了callback则无效】
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时有效。【成功（ok alertmsg）：statusCode没有或为200，失败：statusCode为300（error alertmsg）或非200（但是却为ok alertmsg）】

貌似还有一个支持跨域请求的参数：dataType:’jsonp’

ajaxform

异步提交表单。

data-rule：定义域校验规则，比如required

data-api
1
2
3
4
5
6
7
8
9
10
11
12
13
<form action="json/ajaxDone.json" data-toggle="ajaxform" data-options="{validate:false}">
  <h5>Data API Ajax提交表单2（不带验证）</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"></div>
  </div>
  <hr style="margin:5px 0 15px;">
  <div class="text-center">
    <button type="submit" class="btn-default">提交表单</button>
  </div>
</form>
javascript
1
2
3
4
5
6
7
8
9
    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 [可选] 是否弹出验证未通过的信息提示【alertmsg】。
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属性。

doload

Ajax载入（ajaxload），异步加载内容到指定目标

data-api
1
<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>
javascript
  • doload(options)

载入指定目标

1
2
3
4
    BJUI.ajax('doload', {
        url: 'html/base/ajax_layout2.html',
        target: '#ajaxload_test_box'
    })
方法
  • reloadlayout(options)

重新载入制定目标，跟doload没有区别，只是不能首次调用，不然会报错如下：

BJUI.ajax: 'refreshlayout' method: This target(DIV) is not initialized!

1
2
3
4
    BJUI.ajax('reloadlayout', {
        url: 'html/base/ajax_layout2.html',
        target: '#ajaxload_test_box'
    })

  • refreshdiv(id)

    刷新指定目标

1
BJUI.ajax('refreshlayout','ajaxload_test_box')
  • refreshlayout(selector)

刷新指定目标

1
BJUI.ajax('refreshlayout','#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属性。

ajaxdownload

异步下载，需要依赖插件$.fileDownload

data-api
1
<button type="button" class="btn-default" data-toggle="ajaxdownload" data-options="{url:'../ajaxdownload?t=1'}">ajax下载</button>
javascript
1
2
3
4
    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请求成功的回调函数。

ajaxsearch

data-api
javascript
参数
名称 类型 默认值 描述
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属性。

分页

数据表格

datagrid

数据表格，ui和data分离处理

data-api

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
    <table class="table table-bordered" data-toggle="datagrid" data-options="{
        height: '100%',
        gridTitle : 'datagrid 完整示例 - Data属性 API',
        showToolbar: true,
        toolbarItem: 'all',
        local: 'local',
        dataUrl: 'json/datagrid/datagrid.json',
        editUrl: 'json/ajaxDone.json',
        paging: {pageSize:50, pageCurrent:5},
        linenumberAll: true
    }">
        <thead>
            <tr>
                <th rowspan="2" data-options="{name:'code',align:'center',width:70}">门诊号</th>
                <th colspan="5" align="center">挂号信息</th>
                <th colspan="3" align="center">病人信息</th>
                <th colspan="3" align="center">就诊信息</th>
                <th rowspan="2" data-options="{name:'opercode',align:'center'}">操作员编号</th>
                <th rowspan="2" data-options="{name:'operdate',align:'center',type:'date',pattern:'yyyy-MM-dd HH:mm:ss'}">操作时间</th>
            </tr>
            <tr>
                <th data-options="{name:'regdate',align:'center',type:'date',pattern:'yyyy-MM-dd HH:mm',render:function(value){return value?value.substr(0,16):value}}">挂号日期</th>
                <th data-options="{name:'order',align:'center',width:50}">当日序号</th>
                <th data-options="{name:'regname'}">挂号类别</th>
                <th data-options="{name:'deptname'}">科室名称</th>
                <th data-options="{name:'regfee',align:'center',width:60}">挂号费</th>
                <th data-options="{name:'name',align:'center',width:70}">姓名</th>
                <th data-options="{name:'sex',align:'center',width:45,render:function(value){return String(value)=='true'?'男':'女'}}">性别</th>
                <th data-options="{name:'age',align:'center',type:'number',width:45,render:function(value){return 2015-parseInt(value)}}">年龄</th>
                <th data-options="{name:'fr',align:'center',width:70}">是否初诊</th>
                <th data-options="{name:'see',align:'center',width:55}">已就诊</th>
                <th data-options="{name:'seedate',align:'center',type:'date',pattern:'yyyy-MM-dd HH:mm:ss'}">就诊时间</th>
            </tr>
        </thead>
    </table>

javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<table id="j_datagrid" class="table table-bordered"></table>
<script type="text/javascript">
$('#j_datagrid').datagrid({
    height: '100%',
    gridTitle : 'datagrid 完整示例 - JS API',
    showToolbar: true,
    toolbarItem: 'all',
    local: 'local',
    dataUrl: 'json/datagrid/datagrid.json',
    columns: [
        {
            name: 'code',
            label: '门诊号',
            align: 'center',
            width: 70
        },
        {
            label: '挂号信息',
            columns: [{
                name: 'regdate',
                label: '挂号日期',
                align: 'center',
                type: 'date',
                pattern: 'yyyy-MM-dd HH:mm',
                render: function(value) {
                    return value ? value.substr(0, 16) : value
                }
            },
            {
                name: 'order',
                label: '当日序号',
                align: 'center',
                width: 50
            },
            {
                name: 'regname',
                label: '挂号类别'
            },
            {
                name: 'deptname',
                label: '科室名称'
            },
            {
                name: 'regfee',
                label: '挂号费',
                align: 'center',
                width: 60
            }]
        },
        {
            label: '病人信息',
            columns: [{
                name: 'name',
                label: '姓名',
                align: 'center',
                width: 70
            },
            {
                name: 'sex',
                label: '性别',
                align: 'center',
                width: 45,
                render: function(value) {
                    return String(value) == 'true' ? '男' : '女'
                }
            },
            {
                name: 'age',
                label: '年龄',
                align: 'center',
                type: 'number',
                width: 45,
                render: function(value) {
                    return 2015 - parseInt(value)
                }
            }]
        },
        {
            label: '就诊信息',
            columns: [{
                name: 'fr',
                label: '是否初诊',
                align: 'center',
                width: 70
            },
            {
                name: 'see',
                label: '已就诊',
                align: 'center',
                width: 55
            },
            {
                name: 'seedate',
                label: '就诊时间',
                align: 'center',
                type: 'date',
                pattern: 'yyyy-MM-dd HH:mm:ss'
            }]
        },
        {
            name: 'opercode',
            label: '操作员编号',
            align: 'center'
        },
        {
            name: 'operdate',
            label: '操作时间',
            align: 'center',
            type: 'date',
            pattern: 'yyyy-MM-dd HH:mm:ss'
        }
    ],
    editUrl: 'json/ajaxDone.json',
    paging: {pageSize:50, pageCurrent:10},
    linenumberAll: true,
    tableWidth:'100%',
    noremove: false
})
</script>

参数

貌似dataType还有一个支持跨域请求的可取值：dataType:’jsonp’，会自动回调填充表格。

1
2
dataUrl: 'http://b-jui.com/demo',
dataType: 'jsonp',

http://b-jui.com/demo是支持jsonp的服务，例如：请求：http://b-jui.com/demo?callback=abc，返回：abc(json)