求一个能实现树形联系人管理的js控件

小弟想求一个js控件，实现大概就是左边一个框，右边一个框，中间有几个按钮，新增、删除等等。点新增，左侧选中的人员就会被选到右侧框中。
应用就是从所有名单中创建自己的几个联系人分组。
有什么控件可以实现这样的功能么？

解决方案 »

  1.   

    楼主这个没有什么难的就是动态添加一个标签append进去就行了
      

  2.   

    做成控件有难度，直接用html+js简单
      

  3.   

    换个问题吧，也是左框右框的问题。各位大侠帮忙看看具体原因是什么
    使用DevExpress.Web.ASPxEditors.ASPxListBox
    代码贴出来，问题描述如下：操作过程1：
    从左侧listbox中选择三项，点击add添加到右侧listbox中。点击submit，成功转入后台。无错误。操作过程2：
    1、从左侧listbox中选择三项，点击add添加到右侧listbox中。
    2、从右侧listbox中选择一项，点击remove从右侧listbox移除，加入左侧listbox。点击submit。
       （1）若选择remove的项为最后一项，则submit的时候成功。
       （2）若选择remove的项不为最后一项，则submit的时候失败，没有转入后台，提示“插入索引已超出范围。必须为非负值，并且必须小于或等于大小。参数名: index ”。若将红色代码注释掉，则不出错。
    HTML：<body>
        <form id="form1" runat="server">
        <div>
        <table>
            <tr>
                <td>
                    <dxe:ASPxListBox ID="lstbox" runat="server" TextField="name" ValueField="id" ClientInstanceName="lstbox">
                    </dxe:ASPxListBox>
                </td>
                <td align="center">
                    <asp:Button ID="Button2" runat="server" Text="add" OnClientClick = "return addItem();"/><br />
                    <asp:Button ID="Button3" runat="server" Text="remove" OnClientClick = "return removeItem();"/>
                </td>
                <td>
                    <dxe:ASPxListBox ID="lstbox1" runat="server" TextField="name" ValueField="id" ClientInstanceName="lstbox1">
                    </dxe:ASPxListBox>
                </td>
            </tr>
            <tr>
                <td colspan = "3">
                    <asp:Button ID="btnOK" runat="server" Text="submit" OnClick="btnOK_Click" />
                </td>
            </tr>
        </table>
        </div>
        </form>
    </body>Javascript：<script type="text/javascript">
        function addItem()
        {
            var index = lstbox.GetSelectedIndex();
            if(index < 0)
            {
                return false;
            }
            var item = lstbox.GetSelectedItem();
            lstbox1.AddItem(item.text, item.value);
            lstbox.RemoveItem(index);   
            return false;
        }
        
        function removeItem()
        {
            var index = lstbox1.GetSelectedIndex();
            if(index < 0)
            {
                return false;
            }
            var item = lstbox1.GetSelectedItem();
            var text = item.text;
            var value = item.value.slice(2);
            lstbox.AddItem(text, value);
            lstbox1.RemoveItem(index);   
            return false;
        }
    </script>
    C#：namespace qunzu
    {
        public partial class WebForm1 : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                IList<Person> list = new List<Person>();
                for (int i = 0; i < 5; i++)
                {
                    Person p = new Person("id"+i, "name"+i);
                    list.Add(p);
                }
                lstbox.DataSource = list;
                lstbox.DataBind();
            }        protected void btnOK_Click(object sender, EventArgs e)
            {
                //some code....
            }
        }    class Person
        {
            string id;        public string Id
            {
                get { return id; }
                set { id = value; }
            }
            string name;        public string Name
            {
                get { return name; }
                set { name = value; }
            }        public Person(string id, string name)
            {
                this.id = id;
                this.name = name;
            }
        }
    }
      

  4.   

    颜色显示失败红色的是Javascript中的：lstbox1.RemoveItem(index);