前端页面自定义分组

前言

  最近小编在做一个有关订餐的项目，项目中用到了自定义分组的知识，需要使用模态框弹出一个框实现左右两栏布局，把左边栏选择出来的东西放到右边栏，然后保存到数据库中。

叙述

   下面的图片是实现的功能，我们来看一下具体的是如何实现的吧。

模态框的实现：

    请看小编的另外的一篇博客Bootstrap 显示模态框

左右两边的内容移动：

 （JS实现）：

 <script type="text/javascript">        //下拉框交换JQuery        $(function () {            //移到右边            $('#add').click(function () {                //获取选中的选项，删除并追加给对方                $('#select1 option:selected').appendTo('#select2');            });            //移到左边            $('#remove').click(function () {                $('#select2 option:selected').appendTo('#select1');            });            //全部移到右边            $('#add_all').click(function () {                //获取全部的选项,删除并追加给对方                $('#select1 option').appendTo('#select2');            });            //全部移到左边            $('#remove_all').click(function () {                $('#select2 option').appendTo('#select1');            });            //双击选项            $('#select1').dblclick(function () { //绑定双击事件                //获取全部的选项,删除并追加给对方                $("option:selected", this).appendTo('#select2'); //追加给对方            });            //双击选项            $('#select2').dblclick(function () {                $("option:selected", this).appendTo('#select1');            });        });</script>

   HTML代码实现

   <div style="margin-left:50px; margin-top:-250px;"> <span id="add">          <input type="button" class="btn" value=">"/>          </span><br />          <span id="add_all">          <input type="button" class="btn" value=">>"/>          </span> <br />          <span id="remove">          <input type="button" class="btn" value="<"/>          </span><br />          <span id="remove_all">          <input type="button" class="btn" value="<<"/>          </span> </div>

左边栏接收来自数据库的数据

前台部分

  <select multiple="multiple" id="select1" style="width:150px;height:200px; float:left;margin-top:10px; border:4px #A0A0A4 outset; padding:4px; " >           <asp:Repeater ID="repCategory" runat="server">            <ItemTemplate>                <option><%# Eval("ownerName") %></option>                            </ItemTemplate>        </asp:Repeater>

后台部分

 protected void Page_Load(object sender, EventArgs e)        {            if (!Page.IsPostBack)            {                //绑定数据库中卡表                repCategory.DataSource = new BLL.userBll().GrouName();                repCategory.DataBind();            }                     }

多个选中的数据移动到右边栏以后，保存到数据库

前台接收

  <div style="margin-top:-250px; margin-left:300px" runat="server" >             <select id="select2" name="select2" multiple="multiple" style="width: 150px;height:200px; float:left;border:4px #A0A0A4 outset; padding:4px;" >                           </select>     </div>

<div  style="margin-top:250px ;float:left" >                    <asp:Button ID="loginbtn" runat="server" Text="保存" OnClick="btnSub_Click" UseSubmitBehavior="false"/>                </div>

后台数据

 protected void btnSub_Click(object sender, EventArgs e)        {            string ownerName = Request.Form["select2"];            string Gname = Request.Form["Text1"];            if (ownerName != null && Gname != null)            {                BLL.userBll get = new BLL.userBll();                // 添加进数据库                string[] ownerName1 = ownerName.ToString().Split(',');                for (int i = 0; i < ownerName1.Length; i++)                {                    get.AddOwnerToGroup(ownerName1[i], Gname);                }            }            else            {                Console.WriteLine("请选择分组人员以及分组名称哦！");            }                             }

局部刷新

   在没有加入以下两个控件之前，不管是搜索还是保存，每一次刷新都是页面的刷新，而不是局部的刷新，所以需要加入以下两个控件。把需要局部刷新的内容包含进去。

小结

    多总结，多分享，遇到问题，耐下心来去解决问题。