multiselect2side双向选择列表插件改进版
为了满足实际程序需要,特在multiselect2side插件的基础上改进已满足异步加载(如MVC)的需要。增加了加载url、saveurl属性以及控件实时刷新加载数据方法,请注意下面红色标记部分。
其中:
url:用于异步加载初始化数据;
saveurl:用户保存设置数据;
reload:用于重新加载插件数据;
multiselect2side 能让传统的多选菜单变成左右两列的方式(一边是未选择的列表、一边是已经选择的列表),在多种情况下,这样的排版特别方便。
请参看 multiselect2side plugin: documentation and demo page 查看各种演示。
简单使用
引用 JS 、 CSS 文件:
<link rel="stylesheet" href="${ STATIC_URL }js/jquery.multiselect2side/css/jquery.multiselect2side.css" /> <script type="text/javascript" src="${STATIC_URL}js/jquery.multiselect2side/js/jquery.multiselect2side.js"></script>
创建 form :
<form method="POST"> <select name="groups" multiple="" id="groups"> <option value="admin">admin</option> <option value="user" selected="">user</option> </select> </form>
调用 JavaScript :
<script type="text/javascript"> $("#groups").multiselect2side({ selectedPosition: 'right', moveOptions: false, labelsx: '${ _("Available") }', labeldx: '${ _("Selected") }',
url: '@Url.RouteUrl("", new { @controller = "Hotel", action = "GetHotelPart"})',
saveurl: '@Url.RouteUrl("", new { @controller = "Hotel", action = "SaveHotelPart"})', }); </script>
刷新控件
search.multiselect2side('reload', "orgid="+nodeid);
效果如图所示:
此控件可用于jquery框架开发。