• 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框架开发。
  • 相关阅读:
    数论数论函数基础知识
    KMP入门和简单运用
    高斯消元入门
    FFT和NTT
    AC自动机入门和简单应用
    后缀自动机入门
    线段树优化建图的速成
    爱情九十七课,降低期待
    爱情九十二课,说出你的弱
    爱情八十六课,等得不是爱情
  • 原文地址:https://www.cnblogs.com/hn731/p/multiselect2side.html
Copyright © 2020-2023  润新知