zoukankan      html  css  js  c++  java
  • 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框架开发。
  • 相关阅读:
    01月04日假期学习
    个人加分项
    12月16日总结
    12月15日总结
    12月13日总结
    01月01日假期学习
    01月02日假期学习
    12月14日总结
    12月17日总结
    01月05日假期学习
  • 原文地址:https://www.cnblogs.com/hn731/p/multiselect2side.html
Copyright © 2011-2022 走看看