更新日志


v1.31
2016-11-01 10:28

[修复] datagrid组件的表格宽度全部变成100%的bug。
[修复] 当窗口发生大小变化时,datagrid组件参数templateWidth未起作用的bug。
[修复] 当日期组件的日期在月底,切换月份时的bug。
[修复] datagrid参数templateWidth、dialogFilterW为0时默认为启用;修复排序bug;新增字段参数itemattr,为items参数指定key/value;新增方法filter,用于数据筛选。
[修复] 分页组件。
[更新] ajaxform、ajaxsearch新增参数validate,是否验证标记。
[更新] 验证插件nice validate更新至1.0.7。
[更新] 图标字体Font Awesome更新至4.7.0。
[调整] CSS细微调整。

v1.3
2016-09-30 16:52

[移除] 固定表头表格、可编辑表格、lookup、upload...

[修改] 主界面、datagrid...

[新增] alertmsg的prompt类型,树型datagrid、suggest...

[替换] 上传组件webuploader...

---------------------------------------

详细更新文档后续更新……

v1.3 beta2
2016-01-06 15:25

对比v1.2版的更新日志,在使用v1.3 beta版的童鞋请更新至v1.3 beta2版。

[core]

  • [新增]方法isIE(return boolean),主要用于判断IE8浏览器,用法:BJUI.isIE(8)。
  • [新增]方法StrBuilder,用于拼接字符串,用法var sb = BJUI.StrBuilder(); sb.add('字符串1').add('字符串3').add('字符串3'); console.log(sb.toString())。清空现有字符串:sb.clear()。判断是否为空:sb.isEmpty()。

[ajax]

  • [新增]使用BJUI.ajax调用ajax方法(内部默认选择器$('body')),支持的方法有(doajax、ajaxform、ajaxsearch、ajaxdownload、doload、reloadlayout、refreshdiv)。ajax提交使用示例:BJUI.ajax('doajax', {url:'del.html', data:{id:1}, datagrid:'test-table'})。注意:使用BJUI.ajax时,方法(doajax、ajaxform、ajaxsearch)如果options未定义target参数(当前操作的容器的jQuery对象或selector表达式),则默认是当前dialog或navtab;如果是ajaxform、ajaxsearch方法,options还需要传递form参数(要操作form的jQuery对象或selector表达式)
  • [新增]原来需要从服务端返回的json参数(datagrid,tabid,dialogid,divid,forward,forwardConfirm)及下面的新增参数,直接定义到前端,不用再从服务端返回,服务端只需返回statusCode和message即可。
  • [新增]参数okCallback(function, 默认null), 服务端返回成功的json(statusCode = BJUI.statusCode.ok)后,执行该自定义函数,参数(datagrid,tabid,dialogid,divid)失效
  • [新增]参数okAfterCallback(function, 默认null), 服务端返回成功的json(statusCode = BJUI.statusCode.ok)后,执行该自定义函数,参数(datagrid,tabid,dialogid,divid)有效
  • [新增]参数errCallback(function, 默认null), 服务端返回错误的json(statusCode != BJUI.statusCode.ok)后,执行该自定义函数
  • [新增]参数failCallback(function, 默认null),ajax请求失败后的执行此自定义函数
  • [新增]参数okalert(boolean, 默认true),当服务端返回成功的json(statusCode = BJUI.statusCode.ok)后,是否弹出提示信息
  • [新增]方法ajaxdownload,使用jquery.fileDownload插件进行ajax方式下载。
  • [新增]ajaxform方法,在IE8下,当form未明确method参数时,默认post方式提交
  • [新增]ajax方法的statusCode = 0时,弹出错误提示“与服务器的通信中断,请检查URL链接或服务器状态!”,可在bjui-regional.zh-CN.js中自定义,键值[ajaxnosend]。

[navtab]

  • [新增]使用BJUI.navtab调用navtab方法(内部默认选择器$('body')),使用示例:BJUI.navtab({id:'navtab-test', url:'navtab.html', title:'测试navtab'})。
  • [新增]长按navtab的标签可以拖动排序,“我的主页”除外。
  • [修改]navtab的显示切换方式改为绝对定位式显/隐,方便保持多个navtab之间的datagrid等组件的高度宽度不变。
  • [优化]reload方法。

[dialog]

  • [新增]使用BJUI.dialog调用dialog方法(内部默认选择器$('body')),使用示例:BJUI.dialog({id:'dialog-test', url:'dialog.html', width:150, mask:true, title:'测试dialog'})。
  • [新增]参数html,支持将一段html内容以弹窗形式展示,支持方法名返回。参数url、html、target的优先级为:url > html > target 。
  • [新增]判断参数id的命名合理性。
  • [修复]参数resizable = false时不能调整弹窗大小。
  • [修复]参数mask = true 时仍能通过switchDialog方法选中。
  • [优化]reload方法。
  • [优化]参数data支持string格式的object或方法名返回。
  • [优化]关闭dialog的逻辑。

[datagrid]

  • [新增]支持嵌套表格,需要参数(hasChild, childOptions)。hasChild(boolean, 默认false),是否需要显示子表格。childOptions(Key-value pairs, 默认{width:'100%',height: 'auto',paging:false,columnMenu:false,filterThead:false,childUpdate:false}),其中参数childUpdate(string/boolean, string可选[all,add,edit,del], 默认false),前提:父表有定义参数updateRowUrl。用途:当子表发生添加、修改、删除操作时,更新父数据。
  • [新增]参数updateRowUrl(string, 默认null),更新单行数据的url,支持占位符{key}标记替换字段值,示例:updateRowUrl:'update.html?name={firstname}'。
  • [新增]参数postData(Key-value pairs, 默认null),用dataUrl请求数据时,需要发送到服务端的其他参数。
  • [新增]参数selectMult(boolean, 默认false),单击行数据时,是否允许选择多行。
  • [新增]参数showChildcol(boolean, 默认undefined, 当hasChild = true时,默认为true),是否显示控制子表显隐(+/-符号)的列。
  • [新增]参数showNoDataTip(boolean/string, 默认true),当未获取到数据时,显示的无数据提示信息,默认提示为"没有数据!"。
  • [新增]参数editType(string, 默认'POST'),ajax提交添加或修改数据时的请求方式,可选值('POST', 'GET', 'raw'),当值为POST或GET时,提交数据key='json',value=json,建议不要使用GET方式; 当值为raw时,post原始json数据(application/json)。
  • [新增]参数beforeSave(function, 默认null,return boolean),提交添加/修改数据之前执行的方法,返回false将不提交。
  • [新增]支持在部分url上可用占位符{key}标记待替换字段值,目前支持updateRowUrl,editUrl(仅限外部编辑时),externalEdit方法opts参数中的url,doAjaxRow方法opts参数中的url,childOptions中的dataUrl(对应的替换对象是父数据)。
  • [新增]方法externalEdit(row, [opts]),外部编辑方法,row参数可以是行号(数字)或tr的jQuery对象,opts(Key-value pairs)参数示例:{dialog:{url:'edit.html?id={id}', width:600, mask:true, title:'编辑'}}, 目前支持dialog、navtab、div(即局部刷新doload)三种外部编辑方式,如果省略了opts,将采用editMode的定义,如果opts参数中未定义url,则使用editUrl。如果外部编辑需要像内部编辑一样的更新行数据,则外部编辑的form需要添加class['datagrid-edit-form'],且该form的其他参数失效。
  • [新增]方法doAjaxRow(row, opts),在某行上执行ajax方法,row参数可以是行号(数字)或tr的jQuery对象,opts参数示例:{url:'check.html?id={id}', confirmMsg:'确定要审核这条数据吗?'},如果服务端成功返回修改后的数据,则自动更新对应行数据。
  • [新增]方法updateRow(row, [updateData]),更新某行,row参数可以是行号(数字)或tr的jQuery对象,updateData参数是要更新的数据(json数据或Key-value pairs),如果没有updateData参数,则根据参数updateRowUrl获取要更新的数据。
  • [新增]方法refreshChild(rows),刷新指定行的子表,rows参数可以是行号(数字)、多个逗号分隔的行号、tr集合的jQuery对象。
  • [新增]方法showChild(rows, [flag], [func]),显示/隐藏子表,rows参数可以是行号(数字)、多个逗号分隔的行号、tr集合的jQuery对象;flag是boolean类型,省略时为true,true=显示,false=隐藏;func是function类型,显示或隐藏后被调用。
  • [新增]方法reload(options),重新加载datagrid数据,options(Key-value pairs)参数示例:{data:[], dataUrl:'data.html', postData:{pageSize:5, pageCurrent:2, name:'孙小空'}, clearOldPostData:false},参数dataUrl和data设置其一即可,dataUrl优先级比data高,参数clearOldPostData为true时将清除之前的postData数据,postData是请求数据时发送到服务端的其他数据,postData参数在设置有dataUrl参数时生效。另外,options还可设置其他datagrid的参数用以覆盖现有参数(不推荐)。
  • [新增]支持外部编辑方式,方式1:改写参数editMode,并使用默认的编辑列,示例:editMode:{dialog:{id:'external-edit', width:500, mask:true, title:'外部编辑'}},目前支持dialog、navtab、div(即局部刷新doload)三种方式,方式1其实也是调用的方法externalEdit;方式2:直接调用方法externalEdit;方式3:见下条“自定义render的按钮触发”。
  • [新增]自定义render的按钮触发。编辑、删除、ajax操作。示例1(编辑):columns options:{render:function() {return '<button type="button" class="btn btn-green" data-toggle="edit.datagrid.tr" data-options="{dialog:{url:'edit.html?id={id}', width:600, mask:true, title:'编辑'}}">编辑</button>'}},按钮上添加属性[data-toggle="edit.datagrid.tr"],如果未添加属性[data-options],将使用editMode的定义。示例2(删除):columns options:{render:function() {return '<button type="button" class="btn btn-red" data-toggle="del.datagrid.tr">删除</button>'}},按钮上添加属性[data-toggle="del.datagrid.tr"]。示例3(ajax):columns options:{render:function() {return '<button type="button" class="btn btn-orange" data-toggle="ajax.datagrid.tr">审核</button>'}},按钮上添加属性[data-toggle="ajax.datagrid.tr"]。示例4(更新行):columns options:{render:function() {return '<button type="button" class="btn btn-blue" data-toggle="update.datagrid.tr">刷新本行</button>'}},按钮上添加属性[data-toggle="update.datagrid.tr"],需要参数updateRowUrl配合。示例5(添加子表数据):columns options:{render:function() {return '<button type="button" class="btn btn-green" data-toggle="addchild.datagrid.tr">添加子表数据</button>'}},按钮上添加属性[data-toggle="addchild.datagrid.tr"],需要参数hasChild、childOptions配合。
  • [新增]columns参数type的选项findgrid,调用findgrid组件,findgrid组件的参数写到columns参数的attrs中,查找国籍的column options示例:{name:'nation', type:'findgrid', attrs:{'data-options':{include:'nation:jc',dialogOptions:{width:500,title:'查询国籍'}, gridOptions:{dataUrl:'json-nation.js', columns:[{name:'name', label:'国名'},{name:'ename', label:'英文'},{name:'jc', label:'简称'}]}}}}。
  • [新增]columns参数defaultVal(默认null),用于在添加时设置该字段的默认值。
  • [新增]columns参数jsontype(可选'number/boolean', 默认null),在添加或修改后,标示发送到服务端的json数据格式。
  • [新增]columns参数quickfilter(boolean, 默认true),是否启用该字段的快速筛选(包括表头筛选及表头字段列菜单筛选)。
  • [新增]取得当前datagrid的筛选条件数据:var filterDatas = $(table).data('filterDatas'),格式:object。注:在参数local='remote'和参数filterAll=true时有效。
  • [新增]取得当前datagrid已选中的行数据:var selectedDatas = $(table).data('selectedDatas'),格式:Array[object]。
  • [新增]对多选select的支持。生成多选select,columns options这样写即可:{name:'type', type:'select', attrs:{'multiple':'multiple'}}
  • [修改]参数columnFilter的默认值改为false。
  • [修改]多字表头可以自动换行显示。
  • [修改]参数fullGrid参数为true时,列宽由table根据内容自行调整,columns参数width无效。
  • [优化]参数height未设置或设置为'auto'时的高度计算。
  • [优化]优化了生成tbody的速度。
  • [优化]columns参数width未设置时,列宽由tbody数据宽度决定,如果没有获取到数据则以表头宽度决定。
  • [修复]加载数据过程中遮罩层会中途消失。

[alertmsg]

  • [新增]使用BJUI.alertmsg调用alertmsg方法(内部默认选择器$('body')),使用示例:BJUI.alertmsg('info', '我是一个提示信息')。

[datepicker]

  • [新增]事件'afterchange.bjui.datepicker'的data对象新增date值(Date对象)。示例:$('dateinput').on('afterchange.bjui.datepicker', function(e, data) {console.log(data.date); console.log(data.value)}

[frag & regional.zh-CN]

  • [新增]datagrid的noData、expandMsg、shrinkMsg,三个提示信息。
  • [新增]datagrid的gridExpandBtn、gridShrinkBtn,显示/隐藏子表的按钮模板。
  • [新增]findgrid的提示信息及按钮模板。
  • [新增]ajaxnosend,ajax请求未成功发送到服务端的提示消息。
  • [新增]idChecked,检查navtab、dialog等的id定义不规范时的提示消息。

[findgrid - 新增]

[介绍]:通过一个包含datagrid的弹窗选择需要的数据并填充到对应的input。

[使用]:

  • 方法1(Dom触发1):<input type="text" name="name" value="" data-rule="required" data-toggle="findgrid" data-options="{include:'name, age, other:age', dialogOptions:{width:500}, gridOptions:{dataUrl:'datagrid-json.js', columns:[{name:'name', label:'姓名'},{name:'sex', label:'年龄'}]}}">;
  • 方法2(Dom触发2):<a href="javascript:;" data-toggle="findgridbtn" data-options="{include:'name, age, other:age', gridOptions:{dataUrl:'datagrid-json.js', columns:[{name:'name', label:'姓名'},{name:'sex', label:'年龄'}]}}">FindGrid - DOM</a>;
  • 方法3(jQuery API):$('selector').findgrid(options)

[参数]:Dom触发时建议设置为集合参数[data-options,支持方法名返回]。

  • pk(string, 默认null):datagrid数据的主键名称,在multiple = true时,和参数oldData配合可以标识已选中项。
  • oldData(string, 默认null)已选中的数据,在multiple = true时有效,和pk配合使用。
  • group(string, 默认null):input的name前缀。
  • suffix(string, 默认null):input的name后缀。
  • include(string, 默认null):需要设置值的input名称,比如input的name有"list.name[],list.sex[],list.age[]",如果只设置name的值,那么include = 'name',在这里group = 'list', suffix = '[]',如果datagrid的数据key和input的name不一致(比如name在datagrid中对应的key为lastname),则include = 'name:lastname',有多个input需要填充,则写多个include = 'age,name',省略此参数则根据datagrid数据中的key自动匹配。
  • exclude(string, 默认null):不需要设置值的input名称,和include正好相反,如果设置有include,则此参数无效。
  • multiple(boolean, 默认false):是否支持多选。
  • append(boolean, 默认false):追加选择的复选框默认状态,multiple = true时有效。
  • empty(boolean, 默认true):显示清除按钮。
  • context(jQuery object/string, 默认null):待填充input所在的容器,可以是jQuery对象或selector表达式。
  • onSelect(function, 默认null):选择数据后执行的方法,如果设置了该方法,则不执行默认的填充数据方法。
  • dialogOptions(Key-value pairs, 默认:{id:null, mask:true, width:600, height:400, title:'FindGrid', maxable:true, resizable:true}):弹出窗口dialog的参数。
  • gridOptions(Key-value pairs, 默认:{width:'100%', height:'100%', columnMenu:false, sortAll:true, filterAll:true, fullGrid:true}):datagrid的参数。

[事件]:

  • 'afterchange.bjui.findgrid',附加参数data包含两个属性(value, data),示例:$('input').on('afterchange.bjui.findgrid', function(e, data) {console.log(data.value); console.log(data.data)},属性value是填充到该input的值,data是选择的datagrid数据,如果multiple = true时,data格式是Array(object),否则是object。
v1.3 beta
2015-12-31 22:50

jQuery库更新到1.11.3

B-JUI框架的js文件合并到all文件了, 只引入bjui-all.min.js即可。

正式版发布的时候将会有两个版本,一个包含(固定表头表格、可编辑表格、lookup)以兼容旧版,另一版本将移除这三个组件(将用findgrid组件(新增)替换lookup)  

-------

其他,等待添加..


(PS. 原计划15年底发布1.3版,结果时间太紧,先发布beta版占个位,文档及更新日志后续补上。)

v1.2
2015-12-31 22:50
  • [修复]datagrid在local模式下提供空数据时显示不正常的bug
  • [新增]ajax下载插件及文档,可以返回规范JSON或正确的文件下载地址
  • [优化]当ajax回调在遇到其他http状态码(401,403,404...)时,如果返回框架规范JSON,则显示返回的信息提示
  • [优化]当调整浏览器大小后,遇到当前navtab有固定表头表格会导致其他navtab的datagrid调整大小失败的问题
  • -----
  • [界面] 五套皮肤重新配色
  • [界面] 重新设计横向菜单,当超出显示宽度时可左右移动,新增列表方式的导航栏
  • [init - 初始化参数] 新增pageInfo对象参数total,用于datagrid返回记录总数
  • [Ajax - JSON回调] 修复当返回超时代码后未正确弹出登陆框的问题
  • [Ajax - JSON回调] 修复当返回超时代码后未正确弹出登陆框的问题
  • [alertmsg] 优化DOM传参,修复某些情况下不能正确关闭的bug
  • [navtab/dialog/alertmsg] 优化DOM传参
  • [表格分页] 修复当进行搜索操作时,当前页不重置为1的问题
  • [datagrid] 新增beforeEdit方法的两个参数($trs, datas)
  • [datagrid] 新增columns参数的文档
  • [datagrid] 新增columns的对象参数add,控制该列是否允许添加
  • [datagrid] 新增exportOption参数的type类型"file"
  • [datagrid] 新增保存时的JSON参数addFlag(是否添加标记),方便后台判断是否是新增的数据
  • [datagrid] 修改dataUrl返回JSON,新增带分页参数
  • [datagrid] 修复远程分页及筛选bug
  • [datagrid] 修复当提供数据为空时,显示不正常的bug
  • [datagrid] 修复当提供width和height参数为百分比时,缩放窗口将调整datagrid的大小
  • [datagrid] 修复列菜单中的排序按钮点击事件
  • [datagrid] 修复列菜单中的筛选面板不能及时隐藏的问题,优化筛选面板中的表单域对应列字段类型
  • [datagrid] 修复html表头不能完全转化为列模型columns的bug
  • [datagrid] 修复新增行不能进行选中操作的bug
  • [datagrid] 修复当保存数据时,返回错误JSON也会退出编辑状态的bug
  • [datagrid] 优化当columns列模型仅提供items参数,未提供render参数时,设置默认的render方法
  • [datagrid] 优化datagrid的宽度计算方法
  • [兼容性] 修复IE8下的部分组件兼容问题
回顶部