引言:
在我们平时开发过程中, 可能都会使用到下拉框这个组件, 里面的值要么是动态的, 要么是静态的, 但是方便日后的维护, 大多数都会将他配置成代码项封装成集合, 通过遍历, 生成动态的数据, 这个数据都是从跳转的控制器以集合的形式带过来, 这会导致每写一个 select 都要从后台把这个集合带过来吗, 然后再去遍历, 这从代码的设计角度来看, 非常的臃肿, 很难实现低耦合, 除非下拉框里面的数据是业务中产生的数据, 不得不这样做. 接下来就讲述下我的简单封装:
引用方式: 我只需要使用 select 组件, 然后再 model 属性中添上我们对应代码项中的编码就可以了,
具体实现的逻辑
首先在所有的页面引入以下的 js, 可以将这段 js 放在一个公用的 js 里面, 就不需要我们单独的调用了, 这里面主要通过遍历页面中所有 class 为 model 的组件, 然后以此遍历, 拿到 model 属性对应的值也就就代码项编码, 这里是 ("MKGL"), 通过使用 ajax 请求到后台的 controller 里拿到代码项的集合, 通过 json 返回来之后, 在进行解析遍历生成动态的下拉框值, 由于这里使用的是 bootstrap select 组件, 在拼接好 option 之后需要进行组件的刷新. 这样就可以了
主要的 js 片段
最后我们看看对应后台模块, 这个 controller 可以写在通用的 controller 下, 后台拿到 model 之后, 直接去代码项的表中寻找这个集合, 由于我这里是放在 ehcache 缓存里面的, 我直接从缓存中取出来的, 不过逻辑都一样的, 然后以 json 格式返回到前台进行解析.
selectcontroller
到这里, 小小的封装就做好了, 功能简单, 但很使用, 希望大家能喜欢, 虽然说不要重复造轮子, 但是我觉得对自己做的东西进行小小的封装, 也是对日后的开发提供一种便利.
感谢大家能看到这里, 文中讲的不正确的地方, 欢迎在下方留言, 我会及时修正.
来源: http://www.jianshu.com/p/8499d8a33f52