GridView中的ListBox:需要JavaScript的帮助 [英] ListBox in GridView : Need help in javascript

问题描述

我有一个gridview，其中有一列asp:ListBox表示当前项"，另一列有asp:ListBox表示可用项".我需要通过javascript将项目从可用项目"移动到当前项目".请帮我如何做.
这是我的尝试.我没有得到相应列表框的正确ID.所以不起作用.

I have a gridview which has a column of asp:ListBox for ''Current Items'' and another column with asp:ListBox for ''available items''. I need to move items from ''available items'' to ''current items'' through javascript. Please help me on how can I do that.
Here is my attempt to do it. I am not getting the correct id of respective listboxes. So it''s not working.

<asp:GridView ID="GridView1" EnableViewState="true" runat="server">
    <columns>
        <asp:TemplateField HeaderText="Current Items">
            <itemtemplate>
                <asp:ListBox ID="ListBox_CurItems" DataTextField="curemp" DataValueField="curemp"

                    runat="server" SelectionMode="Multiple">
            </itemtemplate>
        
        <asp:TemplateField HeaderText="Remove Items">
            <itemtemplate>
                <input  önclick="Javascript:MoveItem('need id of ListBox_CurItems. how to get it?', 'need id of ListBox_Available_Items');"

                    type="button" value="->" />
            </itemtemplate>
        
        <asp:TemplateField HeaderText="Add Items">
            <itemtemplate>
                <input  önclick="Javascript:MoveItem( 'need id of ListBox_Available_Items how to get it?' , 'need id of ListBox_CurItems' )" type="button" value="<-" />
            </itemtemplate>
        
        <asp:TemplateField HeaderText="Employee To Add">
            <itemtemplate>
                <asp:ListBox ID="ListBox_Available_Items" DataTextField="emp" DataValueField="emp"

                    DataSource='<%# PopulateControls() %>' runat="server">
            </itemtemplate>
        
    </columns>

<script type="text/javascript">
        function MoveItem(ctrlSource, ctrlTarget) {
          
            var Source = document.childNodes.item.getElementById(ctrlSource);
         
            var Target = document.getElementById(ctrlTarget);
          
            if ((Source != null) && (Target != null)) {
                alert('inside if loop');
                while (Source.options.selectedIndex >= 0) {
                    var newOption = new Option(); // Create a new instance of ListItem
                    newOption.text = Source.options[Source.options.selectedIndex].text;
                    newOption.value = Source.options[Source.options.selectedIndex].value;
                    alert(newOption.value);
                    Target.options[Target.length] = newOption; //Append the item in Target
                    Source.remove(Source.options.selectedIndex);  //Remove the item from Source
                }
            }
        }
</script>

提前非常感谢

Thanks a lot in advance

推荐答案

非常感谢.

我尝试过，当我单击列表框时得到了ID.

对不起，我知识渊博.我需要再问一遍.

实际上，单击输入按钮的另一列时，我需要在同一行中获得列表框的ID.基本上，我需要在以下项目的onclick上获取它(请参阅我之前提到的代码).

Thanks a lot.

I tried and I got id when I clicked on listbox.

Sorry for my poor knowledge. I need to ask again.

Actually I need to get id of listbox in the same row when clicked on input button which is another column. Basically I need to get it onclick of below item ( refer the code I mentioned earlier ).

<asp:TemplateField HeaderText="Add Items">            
  <itemtemplate>                
    <input  onclick="Javascript:MoveItem( ''need id of ListBox_Available_Items how to get it?'' , ''need id of ListBox_CurItems'' )" type="button" value="<-" />            
 </itemtemplate>

基本上，单击按钮(存在于同一行的另一列中)即可获得列表框的ID(存在于该行的特定列中).

希望我足够清楚

Basically get the id of a list box ( which exist in specific column of the row ) on click of a button ( which exist in another column of same row ).

Hope I am clear enough

如果您的意思是通过单击同一gridview行中的按钮来获取gridview行中列表框的客户端ID，则这是解决方案:

我认为您的问题可以通过两种方式解决:

If what you mean is to get the client side id of a listbox in a gridview row by clicking a button in the same gridview row , here is the solution :

I think your problem can be solved in 2 ways :

1. 使用jQuery，查看下面的示例网格视图:
   
   

1. Using jQuery , looking at the sample grid view below :
   
   

<code>
    <asp:gridview id="gvSample" enableviewstate="true" runat="server" xmlns:asp="#unknown">
    <columns>
    <asp:templatefield headertext="Current Items">
    <itemtemplate>
    <asp:listbox id="ListBox_CurItems" datatextfield="curemp" datavaluefield="curemp" runat="server" selectionmode="Multiple">
    </asp:listbox>
    </itemtemplate>
    </asp:templatefield>
    <asp:templatefield>
    <itemtemplate>
    <asp:button runat="server" id="btnGetListId" text="Get List Id">
OnClientClick="return getListId(this.id);"/>
    </asp:button></itemtemplate>
    </asp:templatefield>
    </columns>
    </asp:gridview>
</code>

我们有一个网格视图 gvSample ，具有2个模板字段，一个包含一个ListBox ListBox_CurItems 控件，另一个包含一个Button控件 btnGetListId ，位于调用 btnGetListId 的 OnClientClick 事件javascript方法 getListId(senderId)来获取与发件人按钮同一行的ListBox的ID是.这是 getListId(senderId)方法的代码，在参考jqeury.js文件后:

we have a grid view gvSample , with 2 template fields, one contains a ListBox ListBox_CurItems control and the other contains a Button control btnGetListId ,, at the OnClientClick event of btnGetListId a javascript method getListId(senderId) is invoked to get the id of the ListBox in the same row as the sender button is. Here is the code of getListId(senderId) method,After referring to the jqeury.js file:

<code>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        function getListId(senderId) {
var curListBox=jQuery(''#'' + senderId).parent().parent().find(''select[id

= ListBox_CurItems]'').attr(''id''); alert(curListBox); return false; } </script> </code>

= ListBox_CurItems]'').attr(''id''); alert(curListBox); return false; } </script> </code>

工作原理:调用javascript方法 getListId(senderId)时，通过单击gridview gvSample 中的任何按钮，按钮将传递其ID到方法，并使用此ID，您可以通过获取 btnGetListId 和 ListBox_CurItems 共享父级(即gridview行)来使用jQuery获取当前的ListBox ID，它是直接父级包含 btnGetListId 的表单元格，因此我们使用此jQuery语法获取共享的父级:

How It Works : when invoking the javascript method getListId(senderId), by clicking any of the buttons in the gridview gvSample the button passes its id to method, and using this id you can utilize jQuery to get the current ListBox id, by getting btnGetListId and ListBox_CurItems shared parent which is the gridview row, which is the direct parent of the table cell containing btnGetListId so we used this jQuery syntax to get the shared parent :

<code>
jQuery(''#'' + senderId).parent().parent()....
</code>

获得共享的父级后，我使用jQuery .find(selector)方法通过其ID获取ListBox:

after getting the shared parent, i used the jQuery .find(selector) method to get the ListBox by its Id :

<code>
jQuery(''#'' + senderId).parent().parent().find(''select[id

这篇关于GridView中的ListBox:需要JavaScript的帮助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！