Utilizar un TreeView en vez del clásico JsTree de Jquery

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script language="javascript" type="text/javascript">
        $(function () {
            $("#<%=treeView1.ClientID%>").click(function (event) {
                var clickedElement = event.target;
                if (clickedElement.tagName == "A") {
                    var elementName = clickedElement.innerHTML;
                    $("#<%=txtTipo.ClientID %>").val(elementName);
                }
            });
            $("#<%=treeView2.ClientID%>").click(function (event) {
                var clickedElement = event.target;
                if (clickedElement.tagName == "A") {
                    var elementName = clickedElement.innerHTML;
                    $("#<%=txtDisciplinaTecnica.ClientID %>").val(elementName);
                }
            });
            $('#<%=txtDisciplinaTecnica.ClientID%>').autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "Documentacion.aspx/GetDisciplina",
                        data: "{ 'term':'" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return { value: item }
                            }))
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(textStatus);
                        }
                    });
                }
            });
            $('#<%=txtTipo.ClientID%>').autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "Documentacion.aspx/GetTipo",
                        data: "{ 'term':'" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return { value: item }
                            }))
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(textStatus);
                        }
                    });
                }
            });
        });
            var contador = 1;

            function añadirDatosLista() {
                var t, fila, celda1, celda2, celda3, nodo1, nodo2, borrar;

                t = document.getElementById("tabla"); 
 
                //Insertamos una nueva fila vac�a en la primera posici�n de la tabla
                fila = t.insertRow(1);
                celda1 = fila.insertCell(0); 
                celda3 = fila.insertCell(2);

                nodo1 = document.createTextNode($("#<%=txtTipo.ClientID %>").val()); 
                nodo2 = document.createTextNode($("#<%=txtDisciplinaTecnica.ClientID %>").val());

                borrar = document.createElement("<INPUT TYPE='button' VALUE=x ONCLICK='borrarDatosLista(this)'>"); 

                contador++;

                celda1.appendChild(nodo1); 
                celda2.appendChild(nodo2);
                celda3.appendChild(borrar);

            }

            function borrarDatosLista(obj) {
               var t = document.getElementById("tabla");
                t.deleteRow ();

            }
            
    </script>

/****************************************************************************************/
<tr style="padding: 5px">
                    <td style="width: 6px" class="verdana11boldnegro">
                        <img src="images/Formularios/pixelnaranja.gif" style="height: 3px; width: 3px;" alt=""
                            align="middle" />
                    </td>
                    <td colspan="7" class="verdana11boldnegro" style="padding: 5px">
                        Título
                    </td>
                </tr>
                <tr style="padding: 5px">
                    <td colspan="8" style="font: 11px Verdana;">
                        <table id="tabla" style="width: 100%" class="ui-widget ui-widget-content">
                            <thead>
                                <tr class="ui-widget-header">
                                    <th class="verdana11boldnegro">
                                        Tipo
                                    </th>
                                    <th class="verdana11boldnegro">
                                        Disciplina
                                    </th>
                                    <th class="verdana11boldnegro">
                                        Eliminar
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td colspan="8" style="height: 5px">
                    </td>
                </tr>
                <tr>
                    <td colspan="3" style="width: 380px">
                        <div id="AgregarGuardarClasificacion">
                            <input id="txtTipo" runat="server" type="text" class="style6" style="width: 340px;"
                                value="" />
                            <img id="Img1" style="cursor: pointer;" onclick="SINO('mostrarOcultarTipo')"
                                src="images/Botones/lupa.gif" alt="" />
                        </div>
                    </td>
                    <td colspan="5">
                        <input id="txtDisciplinaTecnica" type="text" runat="server" class="style6" style="width: 340px;"
                            value="" />
                        <img id="disciplinaTecnicaPopUp" style="cursor: pointer;" onclick="SINO('mostrarOcultarDisciplina')"
                            src="images/Botones/lupa.gif" alt="" />
                        <input type="hidden" id="hiddenDisciplinaTecnica" />
                        <input id="A�adir" type="button" value="A�adir" onclick="javascript:a�adirDatosLista();"/> 
                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <div id="mostrarOcultarTipo" style="display: none; overflow: auto; text-align: left;
                            width: 360px; height: 210px">
                            <asp:TreeView ID="treeView1" ExpandDepth="0" ShowExpandCollapse="true" SelectedNodeStyle=""
                                PopulateNodesFromClient="true" EnableClientScript="true" ShowLines="true" PopulateOnDemand="true"
                                runat="server">
                            </asp:TreeView>
                        </div>
                    </td>
                    <td colspan="5">
                        <div id="mostrarOcultarDisciplina" style="display: none; overflow: auto; text-align: left;
                            width: 350px; height: 210px">
                            <asp:TreeView ID="treeView2" ExpandDepth="0" ShowExpandCollapse="true" SelectedNodeStyle=""
                                PopulateNodesFromClient="true" EnableClientScript="true" ShowLines="true" PopulateOnDemand="true"
                                runat="server">
                            </asp:TreeView>
                        </div>
                    </td>
                </tr>
/**********************************************************/
// recursion function
        private void CreateTreeView(List<PRO_Tipo> source, string parentID, TreeNode parentNode)
        {
            List<PRO_Tipo> newSource = source.Where(a => a.IdPadre.Equals(parentID)).ToList();
            foreach (var i in newSource)
            {
                TreeNode newnode = new TreeNode(i.Descripcion, i.Id.ToString());
                newnode.Selected = false;
                newnode.NavigateUrl = "javascript:void(0);";
                if (parentNode == null)
                {
                    treeView1.Nodes.Add(newnode);
                }
                else
                {
                    parentNode.ChildNodes.Add(newnode);
                }
                CreateTreeView(source, i.Id, newnode);
            }
        }

        private void CreateTreeView2(List<PRO_DisciplinasTecnicas> source, string parentID, TreeNode parentNode)
        {
            List<PRO_DisciplinasTecnicas> newSource = source.Where(a => a.IdPadre.Equals(parentID)).ToList();
            foreach (var i in newSource)
            {
                TreeNode newnode = new TreeNode(i.Descripcion, i.Id.ToString());
                newnode.Selected = false;
                newnode.NavigateUrl = "javascript:void(0);";
                if (parentNode == null)
                {
                    treeView2.Nodes.Add(newnode);
                }
                else
                {
                    parentNode.ChildNodes.Add(newnode);
                }
                CreateTreeView2(source, i.Id, newnode);
            }
        }

        [WebMethod]
        public static List<string> GetDisciplina(string term)
        {
            List<string> listDisciplina = new Referencias().GetAutoDisciplina(term);
            return listDisciplina;
        }        

        [WebMethod]
        public static List<string> GetTipo(string term)
        {
            List<string> listTipo = new Referencias().GetPRO_Tabla(term);
            return listTipo;
        }
//Cargamos el treeView PRO_Tipo
            List<PRO_Tipo> listPRO_Tipo = new Referencias().GetPRO_Tabla();
            CreateTreeView(listPRO_Tipo,"", null);

            //Cargamos el treeView DisciplinasTecnicas
            List<PRO_DisciplinasTecnicas> listPRO_DisciplinasTecnicas = new Referencias().GetPRO_DisciplinasTecnicas();
            CreateTreeView2(listPRO_DisciplinasTecnicas, "", null);

/***************************************************************************/
#region GetPRO_Tabla
        /// <summary>
        /// Obtiene los datos de la tabla maestra tabla
        /// </summary>
        /// <returns>List --> lista de objetos struct</returns>
        public List<PRO_Tipo> GetPRO_tabla()
        {
            BDRouter oRouter = new BDRouter();
            System.Data.SqlClient.SqlDataReader oReader = null;
            List<PRO_Tipo> listCombo = new List<PRO_Tipo>();

            try
            {
                string sql = "Select Id, Descripcion, IdPadre FROM tabla order by Id";
                oReader = oRouter.ExecDR(sql);

                if (oReader != null && oReader.HasRows)
                {
                    PRO_Tipo combo;
                    while (oReader.Read())
                    {
                        combo = new PRO_Tipo();

                        combo.Id = oReader["Id"].ToString();
                        combo.Descripcion = oReader["Descripcion"].ToString();
                        combo.IdPadre = oReader["IdPadre"].ToString();
                        listCombo.Add(combo);
                    }
                }
            }
            catch (Exception e)
            {
                GestorErroresCOM.cError.setNewError(e, "");
            }
            finally
            {
                if (oReader != null)
                {
                    oReader.Close();
                    oReader = null;
                }

                oRouter.CloseCon();
                oRouter = null;
            }

            return listCombo;
        }
        #endregion

Comentarios

Entradas populares