ligerUI是基于jquery的一套js UI框架
项目工程中,有些心得和想法,分享给大家
项目中用到的版本为ligerUI 1.2.2,可能后续版本略有差异。
经过项目使用,个人心得,多看API和demo,源代码也需要看看,个人感觉源代码更全,更详细,很有必要看下,有时API不开放的方法,也可以调用,或做一些定制。
ligerUI前后台交互都是通过json来的。
如果对json格式不熟悉,请参考:http://www.json.org/
$("#queryForm").ligerForm({ inputWidth: 170, labelWidth: 90, space: 40, validate : true, fields: [ { display: "userName", name: "userName", newline: false, type: "text",group: "search", groupicon: $._groupIcon} ] }); $("#demo").ligerGrid({ height:'100%', checkbox: true, columns: [ { display: '用户名', name: 'userName', width: 100 ,editor: { type: 'text'},isSort:false}, { display: '用户类型', name: 'userType', width: 120,isSort:false, render: function (item) { return getValue("userType", item.userType); // getValue js是自己写的js,根据key转义为需要展示的value } } ], pageSize:10 ,rownumbers:true, url: "${your_url}", toolbar: { items: [ { text: 'add', click: addClick, icon: 'add'}, { line: true }, { text: 'modify', click: modifyClick, icon: 'modify' } ] } });
如何获取列表选中的行数 并循环取值:
var manager = $("#gridId").ligerGetGridManager(); var rows = manager.getSelectedRows(); var userId; $.each(rows, function (i, item) { userId=item.userId; });
编辑完表格后,终止编辑,告诉管理器编辑完毕
var manager = $("#gridId").ligerGetGridManager(); manager.endEdit();
提交表单所有数据
function (gridId, url, callback) { var manager = $("#" + gridId).ligerGetGridManager(); manager.endEdit(); var params=manager.getData(); params=JSON.stringify(params); $.ajax({ contentType : 'application/json', type: "POST", dataType: "json", url: url, data: params, success: function (data) { if (callback) callback(data); } }); };
关于表单中日期格式传到后台格式问题(传到后台时会出现类似 ....(中国标准时间))
可以经过json转换:比如:
var form = liger.get("form1"); var params = form.getData(); params=liger.toJSON(params); params = eval("("+params+")");
后台java 转换类如下:
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSS'Z'"); sdf.setTimeZone(TimeZone.getTimeZone("GMT")); sdf.setLenient(false); try { return sdf.parse(source); } catch (ParseException e) { logger.error("",e); }
//表单中select自动加载url:url对应后台方法返回json数据格式,返回如下{"name":yourName,"value":yourValue}
$("#publishForm").ligerForm({ inputWidth: 170, labelWidth: 90, space: 40, validate : true, fields: [ { display: "UserList", name: "user", newline: true,type: "select", options :{'url':"${your_url}", valueField : "value" , textField : "name",slide:true}} ], buttons: [ { text: 'submit', width: 60, click:submit}, { text: 'cancel', width: 60, click:cancel} ] }); });
新增form demo(校验等)
$("#form1").ligerForm({ inputWidth: 170, labelWidth: 90, space: 40, validate : true, // unSetValidateAttr:true, fields: [ { display: "userName", name: "userName", newline: true, type: "text" ,validate:{required:true}}, { display: "userType"/>", name: "userType", newline: true,type: "select", options :{'data':getValue('userType'), valueField : "value" , textField :"name",onSelected:f_onUserTypeChanged},validate:{required:true}}, { display: "relatedUser"/>", name: "relatedUser", newline: true,type: "select", options :{'url':"", valueField : "value" , textField : "name",slide:true},validate:{required:false}}, { display: "description", name: "description", newline: true, type: "textarea", width:350}, { name: "status",type: "hidden"} ], buttons: [ { text: 'save', width: 60, click: save }, { text: 'close>', width: 60, click: close } ] }); }); function f_onUserTypeChanged(value){ var form = liger.get("form1"); if(value==2){ getFormField("form1","2").css("display","none"); form.getEditor("relatedUser").clearContent(); form.getEditor("relatedUser").setUrl("${yourUrl}"); form.getEditor("relatedUser").reload(); } else if(value==1){ getFormField("form1","2").css("display","block"); } }
获取form的第几个field
function getFormField(formId,index) { return $("#"+formId+" > div.l-form-container > ul").eq(index); };
相关推荐
ligerui-LigerUI
最详细的LigerUI帮助文档,附带bootstrap
ligerUI的日期控件,原来的不支持秒,改成支持秒
Ligerui Table 导出excel表格 (基于jquery) 1.支持原样式导出 2.支持带图片导出 3.支持固定行固定列导出
ligerui-LigerUI-Release Demo,是整个Web ERP开发系统的Demo来的;不管是新鸟还是老鸟;拥有这个demo,保证能帮你很大忙,希望能帮到你!!
ligerui-LigerUI-V1.2.5 界面开发框架整套框架 新版本集成列表,编辑以及框架图标与一体
Ligerui Grid合并单元格 ,指定列合并单元格,该合并是整列合并
ligerUI Tree对checkbox的禁用,设置成只读,只要早jsp中引入此文件即可。
使用LigerUI的Grid和Java的Json实现数据显示
一套免费,强大的UI JQUERY API 中文手册
jQuery LigerUI 是基于jQuery的一系列UI控件组合,简单而又强大,致力于快速打造Web前端界面解决方案。 因为是前端控件,跟服务器无关,可以适合.net,jsp,php等等web服务器环境。目前全部插件的打包压缩JS只有100K...
Jquery LigerUI中文帮助文档,可下载方便使用。
ligerUI的拖动效果demo
ligerUI 教程API手册,方便查询
西瓜定制LigerUi基于LigerUi二次开发的
ligerUi框架,里面包含了基本的demo演示(Source文件夹)及相关的api(Document文件夹)
一个非常好的JQUery LigerUI事例 VS2010 SqlServr2008 R2
jQuery LigerUI V1.3.2 最新代码
jQuery ligerUI 帮助文档,也是对JavaScript的封装。
jQuery LigerUI 最新版压缩包(含chm帮助文档、源码、donet权限示例) 压缩包中文件: ligerRMV2.7z :为donet下liger实现的权限控制案例 jQuery LigerUI V1.1.9.7.rar:document文件夹下有chm帮助文档。source目录...