ligerUI---ligerForm中下拉框使用
写在前面:
最近项目的前框框架用的是ligerUI,一开始我是拒绝的,因为貌似ligerUI很少有人用,我真的很想问我们team的斌哥哥为什么要用ligerUI来做前端框架?????(啊哈哈哈,用什么都是一样,反正都不会。。。)而且从来都没有接触过ligerUI,哎哎哎,做的过程中真的是很烦很烦,因为没人能帮助,而且官网api大多数的demo都是从本地获取数据,但是我们肯定不是拿本地数据的,而是从后台获取数据哒。。只能慢点看api,看demo了。。。。还好还好。我做的module已经做出来了。啊哈哈。。。。。(也很感谢在做的过程中帮助过我的人,不得不说 有时候真的是别人没有义务要去帮你解决一个哪怕是在别人看来很简单很简单的问题,我加了一个ligerUI群,里面四五百人,我在里面提问题,回复我的没人。。。世态炎凉啊。。但是助人为乐哇。。。。)
对于ligerForm中的下拉框,首先url向后台发送请求,后台进行数据获取,然后转成对应的json格式对应的json格式对应的json格式的数据,重要的事情说三遍。废话补多少 直接上代码 简单明了。。
1.前台页面代码:
form1 = $("#form1").ligerForm({
inputWidth: 170, labelWidth: 100, space: 15, labelAlign: 'right', validate: true,
fields: [ {
id: 'systemSelect',
type: 'select',
display: '系统',
newline: true,
name:'systemId',
//当想要获取下拉框里面的值的时候使用
//liger.get("comboboxName").getValue();
comboboxName:'systemSelect', options: {
//向后台发送的请求路径
url: '${baseURL}/listAllSystem.action',
//下拉框中显示内容 对应 的 id字段
valueField:'systemId',
//下拉框中显示的内容 对应 的字段
textField:'systemName', onSelected :function(newvalue){
//选中下拉框事件。。。
}, }, }, ], });
2.后台代码:
@Controller("SystemAction")
public class SystemAction extends ActionSupport{ //注入业务层接口
@Resource
private SystemService systemService; //对于struts2返回的json格式的数据arr能被页面接收
//需要提供一个get方法 这点不可以漏掉
private JSONArray arr;
public JSONArray getArr() {
return arr;
} public String listAllSystem(){ List<System> systemList = systemService.getAll(System.class);
arr = new JSONArray(); for(System sys:systemList){
JSONObject obj = new JSONObject();
obj.put("systemId",sys.getSystemId());
obj.put("systemName",sys.getSystemName());
arr.add(obj);
} java.lang.System.out.println(arr.toString());
//[{"systemId":1,"systemName":"USM"},{"systemId":2,"systemName":"DMS"},{"systemId":3,"systemName":"LOL"}]
//后台打印的数据如上,这里的systemId,systemName都要与前台页面中的相对应 return "system_list";
} }
千万不要以为只要我后台action中的数据返回的格式是json格式,就可以在前台页面中直接获取到然后作显示,那是不可能的。
前台能接收后台的json格式的数据需要做以下处理:
1.首先你的后台返回的json格式的数据要与你前台页面下拉框进行显示的字段内容相对应:如图:
2.
2.配置struts2返回的结果集视图 设置type=json(我这里用的是struts2的框架 故以struts2框架举例)
<action name="listAll*" class="{1}Action" method="listAll{1}">
<result name="system_list" type="json">
<!-- 设置数据的来源从某个数据得到 这里是arr-->
<param name="root">arr</param>
</result>
</action>
3.设置对应action所在的package继承自json-default
<package name="fums" namespace="/" extends="struts-default,json-default">
4.在后台action中将要返回的数据提供get方法
5.在struts.xml中设置返回数据的格式(见第2步中的代码,即设置的<param>部分)
注意:
对于ligerForm中的下拉框,可以有id,也可以有comboboxName属性,这里我的两者都是同名的,当两者都存在时,获取表单中的
下拉框liger.get("systemSelect");,这里的systemSelect对应的是id的值,当不写id也是可以的,这时候获取下拉框liger.get("systemSelect")
这里的systemSelect对应的是comboboxName的值,即不写id属性,可以根据comboboxName属性的值来获取
好啦。。有了这些 就成功啦。。。。啊哈哈
后续添加笔记:
//获取组件
liger.get("roleName").setValue("设置");
liger.get("roleName").getValue();
//设置ligerui表单元素是否隐藏(可见)
form1.setVisible(["roleId","cTime","uTime","functionIds"],false);
/*设置表单元素隐藏:
1.type="hidden" 则不能使用liger.get(xxx).setValue(xxx);
可以使用$("#xxx").val();赋值
2.使用form.setVisible();是元素不可见,能使用liger.get(xxx).setValue(xxx);*/
ligerUI---ligerForm中下拉框使用的更多相关文章
- flex中下拉框的实现
flex中下拉框的实现 <mx:ComboBox id = "combobox" dataProvider = "{deviceCodeType }" e ...
- MVC中下拉框显示枚举项
原文:MVC中下拉框显示枚举项 本篇将通过3种方式,把枚举项上的自定义属性填充到下拉框: 1.通过控制器返回List<SelectListItem>类型给前台视图 2.通过为枚举类型属性打 ...
- LigerUI的下拉框行和树的设置(表单生成)
http://blog.csdn.net/dxnn520/article/details/8194767 // ---------------------- // [下拉树设置 -- 单选] {dis ...
- DevExpress GridControl 中下拉框联动效果的实现(及支持文本框录入情况)
先解释一下标题: grid中的某一列默认为文本框,根据需要动态的变更为下拉框,且支持动态变更数据源 需求是这样的: 有一些参数(A),这些参数又分别对应另外的参数(B),所以,先把A作为一列,B根据A ...
- 选择屏幕中的下拉框和dialog中下拉框设计
REPORT YTEST014. PARAMETERS: auart LIKE vapma-auart AS LISTBOX VISIBLE LENGTH 6. AT SELECTION-SC ...
- 帝国cms中下拉框select的绑定
在修改数据模型中,将下拉框的表示代码换成下: 将id换成自己的id地址.数据库查询中的classid换成自己创建栏目的id. <select name="diqu" id=& ...
- jQuery中下拉框select的操作方法详解
最近在写页面的时候常常遇到要动态增删改下拉框select的情况,由于我比较习惯用jquery框架来架构我的前端js,所以就顺便把各种jquery操作下拉框select的方法总结了一下,收藏起来以便下次 ...
- LigerUI ligerComboBox 下拉框 表格 多选无效
$("#txt1").ligerComboBox({ width: 250, slide: false, selectBoxWidth: 500, selectBoxHeight: ...
- MVC视图中下拉框的使用
一.一般变量或对象的绑定 首先要在controller 中将选项设置成 selecList对象,并赋值给viewBag动态对象. public ActionResult Index(string mo ...
随机推荐
- Web攻击技术
Web攻击技术 1.针对Web的攻击技术 1.1.在客户端即可篡改请求 在Web应用中,从浏览器那接收到的Http的全部内容,都可以在客户端自由地变更.篡改,所以Web应用可能会接收到与预期数据不相同 ...
- 关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
轮播中大多会选择mouseover和mouseout 这个时候是没有任何问题的 但当遇到有css3动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...
- 从.git文件夹探析git实现原理
git是一款分布式代码版本管理工具,通过git能够更加高效地协同编程.了解git的工作原理将有助于我们使用git工具更好地管理项目.通过了解.git文件夹中的文件组成,我们可以从一个角度去窥探git的 ...
- Vue.js简单的应用
1:一个简单实现 下面代码部分: <body> <div id="myDiv1"> {{userName}} </div> </body& ...
- SaltStack 部署案例 02
远程执行 salt '*' state.sls apache '*':代表所有主机 state.sls :是一个模块 apache : 状态 ,表示需要部署的内容,后缀.sls YAML:三板斧 1. ...
- cinder控制节点集群
#cinder控制节点集群 openstack pike 部署 目录汇总 http://www.cnblogs.com/elvi/p/7613861.html #cinder块存储控制节点.txt.s ...
- mysql最佳优化经验
今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心的事,而这更是我们程序员需要去关注的事情.当我们去设计数据库表结构,对操作数据 ...
- python学习之路day1
学习总结: 变量,字符的由来,python2和python3的区别,控制语句:if,for,while,break,continue用法 学习示例: if用法1:判断年龄 # -*- coding: ...
- javascript设计模式——策略模式
前面的话 在程序设计中,常常遇到类似的情况,要实现某一个功能有多种方案可以选择.比如一个压缩文件的程序,既可以选择zip算法,也可以选择gzip算法.这些算法灵活多样,而且可以随意互相替换.这种解决方 ...
- 日志模块---logging
作用 在程序的运行过程中,会遇到很多需要打印的中间信息,通过使用logging模块可以详细的输出信息,不同于print()函数的单一功能. 应用场景 对于软件程序的运行过程中输出中间信息,如账单信息, ...