使用jquery将json数据绑定到树视图 [英] Bind json data to tree view using jquery

查看：69
本文介绍了使用jquery将json数据绑定到树视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

大家好，



i有一个json文件，我想用jquery将这个json数据显示到树视图中，

我的json文件中的示例数据如下： -



[{menuid：1，caption：& Education，ParentID： 0，HasChild：True，isactive：True}，

{menuid：2，caption：& IT，ParentID ：1，HasChild：True，isactive：True}]







请在下面找到我的代码，



设计页面：



 <％@     Page    语言  =  C＃    AutoEventWireup   =  true    CodeFile   =  Default2。 aspx.cs   继承  =  Default2   ％>  
 
 <  ！DOCTYPE     html     PUBLIC     -  // W3C // DTD     XHTML     1.0     Transitional // EN   http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd > ;  
 
 <   html     xmlns   =  http ：//www.w3.org/1999/xhtml >  
 <   head     id   =  Head1    runat   =  server  >  
 <   title  > ;  Untitled Page <   / title  > ;  
 <   script     src   =  http：// code .jquery.com / jquery-1.10.1.min.js >  < /   script  >  
 <   script     type   =  text / javascript    src   =  http://ajax.goog leapis.com/ajax/libs/jquery/1.8.3/jquery.min.js\">   <   /   script  >  
 <   script    类型  =  text / javascript >  
  function  testJson（）{
  //  调试器;  
 $ .ajax（{
类型：   POST，
 url：  Default.aspx，
 data：  {} ，
 contentType：  application / json; charset = utf-8，
  //   dataType：json， 
成功：功能（msg）{
 alert（msg）; 
}，
错误： function （msg）{
 alert（msg）; 
} 
}）; 
}; 
 
 
 <   /   script  >  
 <   / head  >  
 <   body     onload   = < span class =code-keyword> testJson（）; >  
 <  表格    id   =  form1    runat   =  server >  
 <   div  < span class =code-keyword>>  
 <   div     id   =  jsonDiv >  
 
 <   / div  >  
 &   / div  >  
 <   / form  >  
 <   / body  >  
 <   / html  >







代码落后：



 使用系统; 
 使用 System.Configuration; 
 使用 System.Data; 
 使用 System.Linq; 
 使用 System.Web; 
 使用 System.Web.Security; 
 使用 System.Web.UI; 
 使用 System.Web.UI.HtmlControls; 
 使用 System.Web.UI.WebControls; 
 使用 System.Web.UI.WebControls.WebParts; 
 使用 System.Xml.Linq; 
 使用 Newtonsoft.Json; 
 使用 System.Text; 
 使用 System.Data.SqlClient; 
 
  public   partial   class  _Default：System.Web.UI.Page 
 {
  protected   void  Page_Load（ object  sender，EventArgs e）
 {
 
  string  result = DataTableToJsonWithStringBuilder（getData（））; 
 Response.Clear（）; 
 Response.Write（result）; 
 Response.End（）; 
 
} 
  public  DataTable getData（）
 {
 DataTable dt =  new  DataTable（）; 
 SqlConnection con =  new  SqlConnection（ @  Data Source = abc\SQL2012; Initial Catalog = test; User ID = sa; Password = test @ 123）; 
 con.Open（）; 
 SqlCommand cmd =  new  SqlCommand（  select top 2 menuid，caption，ParentID，HasChild，isactive from menu，con）; 
 SqlDataAdapter da =  new  SqlDataAdapter（cmd）; 
 
 DataSet ds =  new  DataSet（）; 
 
 da.Fill（dt）; 
 
 con.Close（）; 
 
  return  dt; 
 
} 
 
  public   string  DataTableToJsonWithStringBuilder（DataTable） table）
 {
  var  jsonString =  new  StringBuilder（）; 
  if （table.Rows.Count >   0 ）
 {
 jsonString.Append（  [）; 
  for （ int  i =  0 ; i <  table.Rows.Count; i ++）
 {
 jsonString.Append（  {）; 
  for （ int  j =  0 ; j <  table.Columns.Count; j ++）
 {
  if （j <  table.Columns.Count  -   1 ）
 {
 jsonString.Append（  \ + table.Columns [j] .ColumnName.ToString（ ）
 +   \： +   \ 
 + table.Rows [i] [j] .ToString（）+   \，）; 
} 
  else   if （j == table.Columns.Count  -  < span class =code-digit> 1 ）
 {
 jsonString.Append（  \ + table.Columns [j] .ColumnName.ToString（）
 +   \： +   \ 
 + table.Rows [i] [j] .ToString（）+   \） ; 
} 
} 
  if （i == table.Rows.Count  -   1 ）
 {
 jsonString.Append（ }） ; 
} 
  else  
 {
 jsonString.Append（ }，）; 
} 
} 
 jsonString.Append（ ]） ; 
} 
 
  return  jsonString.ToString（）; 
 
} 
}







提前感谢。



我尝试过：



将json数据绑定到树视图jquery

解决方案

.ajax（{
type： POST，
url： Default.aspx，
数据： {}，
contentType： application / json; charset = utf-8，
/ / dataType：json，
成功： function （msg）{
alert（msg）;
}，
错误： function （msg）{
alert（msg）;
}
}）;
};


< / script >
< / head >
< 正文 onload = testJson（）; >
< 表格 id = form1 runat = server >
< div >
< div id = jsonDiv >

< / div >
< / div >
< / form >
< / body >
< / html >







代码落后：



 < span class =code-keyword>使用系统; 
 使用 System.Configuration; 
 使用 System.Data; 
 使用 System.Linq; 
 使用 System.Web; 
 使用 System.Web.Security; 
 使用 System.Web.UI; 
 使用 System.Web.UI.HtmlControls; 
 使用 System.Web.UI.WebControls; 
 使用 System.Web.UI.WebControls.WebParts; 
 使用 System.Xml.Linq; 
 使用 Newtonsoft.Json; 
 使用 System.Text; 
 使用 System.Data.SqlClient; 
 
  public   partial   class  _Default：System.Web.UI.Page 
 {
  protected   void  Page_Load（ object  sender，EventArgs e）
 {
 
  string  result = DataTableToJsonWithStringBuilder（getData（））; 
 Response.Clear（）; 
 Response.Write（result）; 
 Response.End（）; 
 
} 
  public  DataTable getData（）
 {
 DataTable dt =  new  DataTable（）; 
 SqlConnection con =  new  SqlConnection（ @  Data Source = abc\SQL2012; Initial Catalog = test; User ID = sa; Password = test @ 123）; 
 con.Open（）; 
 SqlCommand cmd =  new  SqlCommand（  select top 2 menuid，caption，ParentID，HasChild，isactive from menu，con）; 
 SqlDataAdapter da =  new  SqlDataAdapter（cmd）; 
 
 DataSet ds =  new  DataSet（）; 
 
 da.Fill（dt）; 
 
 con.Close（）; 
 
  return  dt; 
 
} 
 
  public   string  DataTableToJsonWithStringBuilder（DataTable） table）
 {
  var  jsonString =  new  StringBuilder（）; 
  if （table.Rows.Count >   0 ）
 {
 jsonString.Append（  [）; 
  for （ int  i =  0 ; i <  table.Rows.Count; i ++）
 {
 jsonString.Append（  {）; 
  for （ int  j =  0 ; j <  table.Columns.Count; j ++）
 {
  if （j <  table.Columns.Count  -   1 ）
 {
 jsonString.Append（  \ + table.Columns [j] .ColumnName.ToString（ ）
 +   \： +   \ 
 + table.Rows [i] [j] .ToString（）+   \，）; 
} 
  else   if （j == table.Columns.Count  -  < span class =code-digit> 1 ）
 {
 jsonString.Append（  \ + table.Columns [j] .ColumnName.ToString（）
 +   \： +   \ 
 + table.Rows [i] [j] .ToString（）+   \） ; 
} 
} 
  if （i == table.Rows.Count  -   1 ）
 {
 jsonString.Append（ }） ; 
} 
  else  
 {
 jsonString.Append（ }，）; 
} 
} 
 jsonString.Append（ ]） ; 
} 
 
  return  jsonString.ToString（）; 
 
} 
}







提前感谢。



我尝试过：



将json数据绑定到树视图jquery


这是你的答案 - 如何将json对象绑定到asp.net TreeView动态控制？ | ASP.NET论坛 [ ^ ]

Hi All,

i have a json file,i want to show this json data into a tree view using jquery,
My sample data in json file is like :-

[{"menuid":"1","caption":"&Education","ParentID":"0","HasChild":"True","isactive":"True"},
{"menuid":"2","caption":"&IT","ParentID":"1","HasChild":"True","isactive":"True"}]



please find my code below,

Design page:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
    function testJson() {
  //  debugger;
    $.ajax({
        type: "POST",
        url: "Default.aspx",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        //dataType: "json",
        success: function(msg) {
           alert(msg);
        },
        error: function(msg) {
            alert(msg);
        }
    });
};
    
    
    </script>
</head>
<body onload="testJson();">
    <form id="form1" runat="server">
    <div>
    <div id="jsonDiv">
    
    </div>
    </div>
    </form>
</body>
</html>




code behind:

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using Newtonsoft.Json;
using System.Text;
using System.Data.SqlClient;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
     
     string result=DataTableToJsonWithStringBuilder(getData());
     Response.Clear();
     Response.Write(result);
     Response.End();

    }
    public DataTable getData()
    {
        DataTable dt = new DataTable();
        SqlConnection con = new SqlConnection(@"Data Source=abc\SQL2012;Initial Catalog=test;User ID=sa;Password=test@123");
        con.Open();
        SqlCommand cmd = new SqlCommand("select top 2 menuid,caption,ParentID,HasChild,isactive from menu", con);
        SqlDataAdapter da = new SqlDataAdapter(cmd);
      
        DataSet ds = new DataSet();
      
        da.Fill(dt);

        con.Close();

        return dt;
        
    }
 
    public string DataTableToJsonWithStringBuilder(DataTable table)
    {
        var jsonString = new StringBuilder();
        if (table.Rows.Count > 0)
        {
            jsonString.Append("[");
            for (int i = 0; i < table.Rows.Count; i++)
            {
                jsonString.Append("{");
                for (int j = 0; j < table.Columns.Count; j++)
                {
                    if (j < table.Columns.Count - 1)
                    {
                        jsonString.Append("\"" + table.Columns[j].ColumnName.ToString()
                     + "\":" + "\""
                     + table.Rows[i][j].ToString() + "\",");
                    }
                    else if (j == table.Columns.Count - 1)
                    {
                        jsonString.Append("\"" + table.Columns[j].ColumnName.ToString()
                     + "\":" + "\""
                     + table.Rows[i][j].ToString() + "\"");
                    }
                }
                if (i == table.Rows.Count - 1)
                {
                    jsonString.Append("}");
                }
                else
                {
                    jsonString.Append("},");
                }
            }
            jsonString.Append("]");
        }
        
        return jsonString.ToString();
        
    }
}




thanks in advance.

What I have tried:

bind json data to tree view using jquery

解决方案

.ajax({ type: "POST", url: "Default.aspx", data: "{}", contentType: "application/json; charset=utf-8", //dataType: "json", success: function(msg) { alert(msg); }, error: function(msg) { alert(msg); } }); }; </script> </head> <body onload="testJson();"> <form id="form1" runat="server"> <div> <div id="jsonDiv"> </div> </div> </form> </body> </html>




code behind:

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using Newtonsoft.Json;
using System.Text;
using System.Data.SqlClient;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
     
     string result=DataTableToJsonWithStringBuilder(getData());
     Response.Clear();
     Response.Write(result);
     Response.End();

    }
    public DataTable getData()
    {
        DataTable dt = new DataTable();
        SqlConnection con = new SqlConnection(@"Data Source=abc\SQL2012;Initial Catalog=test;User ID=sa;Password=test@123");
        con.Open();
        SqlCommand cmd = new SqlCommand("select top 2 menuid,caption,ParentID,HasChild,isactive from menu", con);
        SqlDataAdapter da = new SqlDataAdapter(cmd);
      
        DataSet ds = new DataSet();
      
        da.Fill(dt);

        con.Close();

        return dt;
        
    }
 
    public string DataTableToJsonWithStringBuilder(DataTable table)
    {
        var jsonString = new StringBuilder();
        if (table.Rows.Count > 0)
        {
            jsonString.Append("[");
            for (int i = 0; i < table.Rows.Count; i++)
            {
                jsonString.Append("{");
                for (int j = 0; j < table.Columns.Count; j++)
                {
                    if (j < table.Columns.Count - 1)
                    {
                        jsonString.Append("\"" + table.Columns[j].ColumnName.ToString()
                     + "\":" + "\""
                     + table.Rows[i][j].ToString() + "\",");
                    }
                    else if (j == table.Columns.Count - 1)
                    {
                        jsonString.Append("\"" + table.Columns[j].ColumnName.ToString()
                     + "\":" + "\""
                     + table.Rows[i][j].ToString() + "\"");
                    }
                }
                if (i == table.Rows.Count - 1)
                {
                    jsonString.Append("}");
                }
                else
                {
                    jsonString.Append("},");
                }
            }
            jsonString.Append("]");
        }
        
        return jsonString.ToString();
        
    }
}




thanks in advance.

What I have tried:

bind json data to tree view using jquery


Here is your answer - How can we bind a json object to asp.net TreeView control dynamically? | The ASP.NET Forums[^]


这篇关于使用jquery将json数据绑定到树视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发语言最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆