Dowemo

Preface preface

In the last few days, you can use a box to lay out the left and right columns in the project, and then save the right column to the right side of the

Describes

The following picture is the function of implementation, and let's look at how to implement it.


Implementation of modal box:

Look at the smaller, plus, another blog bootstrap display modal box.

Content on both sides of the move:

( js implementation ):


 <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 code implementation


 <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>





The left column receives data from the database

Front part

 <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>





Background section

 protected void Page_Load(object sender, EventArgs e)


 {


 if (!Page.IsPostBack)


 {


//绑定数据库中卡表


 repCategory.DataSource = new BLL.userBll().GrouName();


 repCategory.DataBind();



 }



 }






More than one selected data moves to the right column, saving to the database

Reception reception


 <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>






Background data

 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("请选择分组人员以及分组名称哦!");


 }



 }





Local refresh

Before you don't join the following two controls, either search or save, each refresh is a refresh of the page, not a local refresh, so you need to add the following two controls. Include the content that requires partial refresh.


Summary

share, experience problems, to solve problems.




Copyright © 2011 Dowemo All rights reserved.    Creative Commons   AboutUs