zoukankan      html  css  js  c++  java
  • jQuery&JSON~~

    js:
    $(function () {
        $.ajax({
            type: 'GET',
            url: 'GetJson.ashx',
            dataType: 'json',
            success: function (data) {
                //$.each(data.menus, function (idx, item) {
                //    alert(idx);
                //    alert(item.street);
                //});
                var menulist = "";
                //alert(data);
                $.each(data.menus, function (i, n) {
                    menulist += '<div title="' + n.menuname + '"  icon="' + n.icon + '" style="overflow:auto;">';
                    menulist += '<ul>';
                    $.each(n.menus, function (j, o) {
                        menulist += '<li><div><a target="mainFrame" href="' + o.url + '" ><span class="icon ' + o.icon + '" ></span>' + o.menuname + '</a></div></li> ';
                    })
                    menulist += '</ul></div>';
                })

                $(".easyui-accordion").append(menulist);
                $('.easyui-accordion li a').click(function (){
                    var tabTitle = $(this).text();
                    var url = $(this).attr("href");
                    addTab(tabTitle, url);
                    $('.easyui-accordion li div').removeClass("selected");
                    $(this).parent().addClass("selected");
                }).hover(function () {
                    $(this).parent().addClass("hover");
                }, function () {
                    $(this).parent().removeClass("hover");
                });

                $(".easyui-accordion").accordion();
            },
            error: function (msg) {
                alert(msg.responseText); 
            }
        });
    })

    .ashx:
    <%@ WebHandler Language="C#" Class="VSSCodeHandler" %>

    using System;
    using System.Web;
    using YJC.Toolkit.Sys;
    using YJC.Toolkit.Data;
    using YJC.Toolkit.Utility;
    using System.Data;

    public class VSSCodeHandler : IHttpHandler{
       
        DbContext context = GlobalVariable.DefaultDbContextConfig.CreateDbContext();

        public void ProcessRequest (HttpContext context) {
           
            context.Response.ClearContent();

            string sql = @"SELECT  FN_ID,FN_PARENT_ID,FN_TREE_LAYER,FN_NAME,FN_URL,'iconCls' as iconCls, FN_REVERSE1 FROM SYS_FUNCTION";

            DataSet ds = new DataSet("Tooklit");
            SqlSelector seletor = new SqlSelector(this.context, ds);
            seletor.Select("SYS_FUNCTION", sql);

            DataTable vTable = ds.Tables["SYS_FUNCTION"];

            string strResult = "{\"menus\":["+"\r\n";
            if (vTable.Rows.Count > 0)
            {
                DataRow[] dr = vTable.Select("fn_parent_id='-1'");
                strResult = DtTreeToJson(vTable, strResult, dr);
            }

            strResult += "\r\n";
            strResult += "]}";

            context.Response.ContentType = "text/plain";
            context.Response.AddHeader("Content-Type", "application/json; charset=gb2312");
            context.Response.Write(strResult.ToString());
        }
       
        private static string DtTreeToJson(DataTable dt, string strResult, DataRow[] dr)
        {
            if (dr.Length > 0)
            {
                for (int i = 0; i < dr.Length; i++)
                {
                    strResult += "{\"menuid\":\"" + dr[i]["fn_id"] + "\",";
                    strResult += "\"icon\":\"icon-sys\",";
                    strResult += "\"menuname\":\"" + dr[i]["FN_NAME"] + "\"," + "\r\n";
                    DataRow[] drChild = dt.Select("fn_parent_id='" + dr[i]["fn_id"] + "'");
                    if (drChild.Length > 0)
                    {
                        strResult += "\"menus\":[";
           
                        for (int j = 0; j < drChild.Length; j++)
                        {
                            strResult += "{\"menuname\":\"" + drChild[j]["FN_NAME"] + "\",";
                            strResult += "\"icon\":\"icon-nav\",";
                            strResult += "\"url\":\"" + drChild[j]["fn_url"] + "\"}";
                            strResult += "\r\n";

                            if (j != drChild.Length - 1)
                                strResult += ",";
                        }
                       
                        strResult += "]"+"\r\n";
                    }

                    strResult += "}" + "\r\n";

                    if (i != dr.Length - 1)
                        strResult += ",";
                }
            }
            return strResult;
        }
       
        public bool IsReusable {
            get {
                return false;
            }
        }
    }

    呵呵,博客园现在还不支持搜狐博客直接搬家功能,只好把之前的搜狐博客日志一个一个Copy过来,和大家一起分享了,这篇是我10年的一个测试实例:

    方法1:

    using System.IO;
    using System.Data.SqlClient;
    using System.Data.Common;
    using Microsoft.Practices.EnterpriseLibrary.Common;
    using Microsoft.Practices.EnterpriseLibrary.Data;
     
    using System.Text;
    using System.Reflection;

    后台代码:

    protected void Page_Load(object sender, EventArgs e)
    {
       if (!Page.IsPostBack)
       {
          string sql = @"SELECT top 10 [Materialcode]
                              ,[MaterialName]
                              ,[MaterialSpec]
                              ,[HelpCode]
                           FROM [aritime].[dbo].[Material_Info_t]";

          DbCommand dbcmd = null;
          dbcmd = DB.GetSqlStringCommand(sql);
          DataSet dataset = null;
          dataset = DB.ExecuteDataSet(dbcmd);
          DataTable dt = dataset.Tables[0];
          Materialcode_List = CreateJsonParameters(dt).ToString().Trim();
          //Response.Write(Materialcode_List.ToString());
           OnStart();
         }
       }

        public static string CreateJsonParameters(DataTable dt)
        {
            StringBuilder JsonString = new StringBuilder();
            JsonString.Clear();

            //Exception Handling       
            if (dt != null && dt.Rows.Count > 0)
            {
                ////JsonString.Append("{ ");
                //JsonString.Append(" var MaterialNameLists = [");

                JsonString.Append("[");

                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    JsonString.Append("{ ");
                    for (int j = 0; j < dt.Columns.Count; j++)
                    {
                        if (j < dt.Columns.Count - 1)
                        {
                            JsonString.Append("" + dt.Columns[j].ColumnName.ToString().Trim() + ":" + "\"" + dt.Rows[i][j].ToString().Trim() + "\",");
                        }
                        else if (j == dt.Columns.Count - 1)
                        {
                            JsonString.Append("" + dt.Columns[j].ColumnName.ToString().Trim() + ":" + "\"" + dt.Rows[i][j].ToString().Trim() + "\"");
                        }
                    }
                    /**/
                    /**/
                    /**/
                    /*end Of String*/
                    if (i == dt.Rows.Count - 1)
                    {
                        JsonString.Append("} ");
                    }
                    else
                    {
                        JsonString.Append("}, ");
                    }
                }
                JsonString.Append("]");
     
                return JsonString.ToString().Trim();
            }
            else
            {
                return null;
            }
        }

        /// <summary>
        /// 将一个数据表转换成一个JSON字符串,在客户端可以直接转换成二维数组。
        /// </summary>
        /// <param name="source">需要转换的表。</param>
        /// <returns></returns>
        public static string DataTableToJson(DataTable source)
        {
            if (source.Rows.Count == 0)
                return "";
            StringBuilder sb = new StringBuilder("[");
            foreach (DataRow row in source.Rows)
            {
                sb.Append("[");
                for (int i = 0; i < source.Columns.Count; i++)
                {
                    sb.Append('"' + row[i].ToString() + "\",");
                }
                sb.Remove(sb.Length - 1, 1);
                sb.Append("],");
            }
            sb.Remove(sb.Length - 1, 1);
            sb.Append("]");
            return sb.ToString();
        }

    //    public void Atest()
    //    {
    //        string path = Server.MapPath("http://www.cnblogs.com/js/localdata.js");
    //        if (File.Exists(path))
    //        {
    //            File.Delete(path);
    //        }

    //        string sql = @"SELECT [Materialcode]
    //                          ,[MaterialName]
    //                          ,[MaterialSpec]
    //                          ,[HelpCode]
    //                       FROM [aritime].[dbo].[Material_Info_t]";

    //        DbCommand dbcmd = null;
    //        dbcmd = DB.GetSqlStringCommand(sql);
    //        DataSet dataset = null;
    //        dataset = DB.ExecuteDataSet(dbcmd);
    //        //创建JS文件.  
    //        StreamWriter sr = File.CreateText(path);
    //        sr.WriteLine("//初始化所有国内机场城市");
    //        sr.WriteLine(" var MaterialNameLists = [" + "\r\n");
    //        //   这里是JS中的内容  
    //        for (int i = 0; i < dataset.Tables[0].Rows.Count - 1; i++)
    //        {
    //            sr.WriteLine("{ Materialcode: \"" + dataset.Tables[0].Rows[i]["Materialcode"].ToString().Trim() + "\",MaterialName: \"" + dataset.Tables[0].Rows[i]["MaterialName"].ToString().Trim() + "\",MaterialSpec: \"" + dataset.Tables[0].Rows[i]["MaterialSpec"].ToString().Trim() + "\",HelpCode:\"" + dataset.Tables[0].Rows[i]["HelpCode"].ToString().Trim() + "\"}," + "\r\n");
    //        }

    //        sr.WriteLine("{ Materialcode: \"" + dataset.Tables[0].Rows[dataset.Tables[0].Rows.Count - 1]["Materialcode"].ToString().Trim() + "\",MaterialName: \"" + dataset.Tables[0].Rows[dataset.Tables[0].Rows.Count - 1]["MaterialName"].ToString().Trim() + "\",MaterialSpec: \"" + dataset.Tables[0].Rows[dataset.Tables[0].Rows.Count - 1]["MaterialSpec"].ToString().Trim() + "\",HelpCode:\"" + dataset.Tables[0].Rows[dataset.Tables[0].Rows.Count - 1]["HelpCode"].ToString().Trim() + "\"}" + "\r\n");

    //        sr.WriteLine("];" + "\r\n");

    //        sr.WriteLine("var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];");

    //        sr.WriteLine("var cities = ['Aberdeen', 'Ada','Akron','Yorkshire', 'Yorkville'];");
    //        sr.Close();
    //    }


    前台代码:

    <input type="text" id="suggest13" />

        <script type="text/javascript" src="http://www.cnblogs.com/js/jquery.js"></script>
        <%--    <script type="text/javascript" src="http://www.cnblogs.com/js/json.js"></script>--%>
        <script type='text/javascript' src='http://www.cnblogs.com/js/jquery.autocomplete.js'></script>
        <%--    <script type='text/javascript' src='http://www.cnblogs.com/js/localdata.js'></script>--%>
        <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/js/jquery.autocomplete.css" />

        <script type="text/javascript">
            $().ready(function () {

                function log(event, data, formatted) {
                    $("<li>").html(!data ? "No match!" : "Selected: " + formatted).appendTo("#result");
                }

                function formatItem(row) {
                    return row[0] + " (<strong>id: " + row[1] + "</strong>)";
                }
                function formatResult(row) {
                    return row[0].replace(/(<.+?>)/gi, '');
                }

                var MaterialNameLists = '<%=Materialcode_List%>';

                ////method 1:eval来转换JSON字符到Object//////
                var arr = eval('(' + MaterialNameLists + ')')
                alert(arr);

                ////method 2:parseJSON来转换JSON字符到Object//////
                //            var obj = MaterialNameLists.parseJSON();
                //            alert(obj.toJSONString()); 

                //            var testlist = [{ Materialcode: "WXCL200400001", MaterialName: "螺栓松动剂", MaterialSpec: "", HelpCode: "LSSDJ" }, { Materialcode: "WXCL200400002", MaterialName: "煤油", MaterialSpec: "", HelpCode: "MY" }, { Materialcode: "WXCL200400003", MaterialName: "铁刷", MaterialSpec: "", HelpCode: "TS" }, { Materialcode: "WXCL200400004", MaterialName: "螺丝", MaterialSpec: "M16*100", HelpCode: "LS" }, { Materialcode: "WXCL200400005", MaterialName: "螺丝", MaterialSpec: "M8*50", HelpCode: "LS" }, { Materialcode: "WXCL200400006", MaterialName: "一字螺丝刀", MaterialSpec: "小", HelpCode: "YZLSD" }, { Materialcode: "WXCL200400007", MaterialName: "十字螺丝刀", MaterialSpec: "小", HelpCode: "SZLSD" }, { Materialcode: "WXCL200400008", MaterialName: "电工皮带", MaterialSpec: "", HelpCode: "DGPD" }, { Materialcode: "WXCL200400009", MaterialName: "工具套", MaterialSpec: "", HelpCode: "GJT" }, { Materialcode: "WXCL200400010", MaterialName: "电工刀", MaterialSpec: "", HelpCode: "DGD"}];

                //            var aad = [{ Materialcode: "WXCL200400001", MaterialName: "螺栓松动剂", MaterialSpec: "", HelpCode: "LSSDJ" }, { Materialcode: "WXCL200400002", MaterialName: "煤油", MaterialSpec: "", HelpCode: "MY" }, { Materialcode: "WXCL200400003", MaterialName: "铁刷", MaterialSpec: "", HelpCode: "TS" }, { Materialcode: "WXCL200400004", MaterialName: "螺丝", MaterialSpec: "M16*100", HelpCode: "LS" }, { Materialcode: "WXCL200400005", MaterialName: "螺丝", MaterialSpec: "M8*50", HelpCode: "LS" }, { Materialcode: "WXCL200400006", MaterialName: "一字螺丝刀", MaterialSpec: "小", HelpCode: "YZLSD" }, { Materialcode: "WXCL200400007", MaterialName: "十字螺丝刀", MaterialSpec: "小", HelpCode: "SZLSD" }, { Materialcode: "WXCL200400008", MaterialName: "电工皮带", MaterialSpec: "", HelpCode: "DGPD" }, { Materialcode: "WXCL200400009", MaterialName: "工具套", MaterialSpec: "", HelpCode: "GJT" }, { Materialcode: "WXCL200400010", MaterialName: "电工刀", MaterialSpec: "", HelpCode: "DGD"}];

                //              alert(aad.toString());

                //            alert(arr);

                $("#suggest13").autocomplete(arr, {
                    max: 15,    //列表里的条目数
                    minChars: 0,    //自动完成激活之前填入的最小字符
                    400,     //提示的宽度,溢出隐藏
                    scrollHeight: 400,   //提示的高度,溢出显示滚动条
                    matchContains: true,    //包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示
                    autoFill: false,    //自动填充

                    formatItem: function (row, i, max) {
                        return i + "/" + max + ": \"" + row.HelpCode + "\" [" + row.Materialcode + "][" + row.MaterialName + "][" + row.MaterialSpec + "]";
                    },
                    formatMatch: function (row, i, max) {
                        return row.HelpCode + " " + row.Materialcode + " " + row.MaterialName + " " + row.MaterialSpec;
                    },
                    formatResult: function (row) {
                        return row.MaterialName;
                    }
                }).result(function (event, row, formatted) {
                    //                var txt = '<%=memo_Input.ClientID%>';
                    //                document.getElementById(txt).value = row.MaterialName;
                    //                document.getElementById('<%=memo_Input.ClientID%>').value = row.MaterialName;
                });
            });
    </script>

                    

              

              

              

              

    方法2:

    后台代码:
        public void Atest()
        {
            string path = Server.MapPath("http://www.cnblogs.com/js/localdata.js");
            if (File.Exists(path))
            {
                File.Delete(path);
            }

            string sql = @"SELECT [Materialcode]
                              ,[MaterialName]
                              ,[MaterialSpec]
                              ,[HelpCode]
                           FROM [aritime].[dbo].[Material_Info_t]";

            DbCommand dbcmd = null;
            dbcmd = DB.GetSqlStringCommand(sql);
            DataSet dataset = null;
            dataset = DB.ExecuteDataSet(dbcmd);
            //创建JS文件.  
            StreamWriter sr = File.CreateText(path);
            sr.WriteLine("//初始化所有国内机场城市");
            sr.WriteLine(" var MaterialNameLists = [" + "\r\n");
            //   这里是JS中的内容  
            for (int i = 0; i < dataset.Tables[0].Rows.Count - 1; i++)
            {
                sr.WriteLine("{ Materialcode: \"" + dataset.Tables[0].Rows[i]["Materialcode"].ToString().Trim() + "\",MaterialName: \"" + dataset.Tables[0].Rows[i]["MaterialName"].ToString().Trim() + "\",MaterialSpec: \"" + dataset.Tables[0].Rows[i]["MaterialSpec"].ToString().Trim() + "\",HelpCode:\"" + dataset.Tables[0].Rows[i]["HelpCode"].ToString().Trim() + "\"}," + "\r\n");
            }

            sr.WriteLine("{ Materialcode: \"" + dataset.Tables[0].Rows[dataset.Tables[0].Rows.Count - 1]["Materialcode"].ToString().Trim() + "\",MaterialName: \"" + dataset.Tables[0].Rows[dataset.Tables[0].Rows.Count - 1]["MaterialName"].ToString().Trim() + "\",MaterialSpec: \"" + dataset.Tables[0].Rows[dataset.Tables[0].Rows.Count - 1]["MaterialSpec"].ToString().Trim() + "\",HelpCode:\"" + dataset.Tables[0].Rows[dataset.Tables[0].Rows.Count - 1]["HelpCode"].ToString().Trim() + "\"}" + "\r\n");

            sr.WriteLine("];" + "\r\n");

            sr.WriteLine("var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];");

            sr.WriteLine("var cities = ['Aberdeen', 'Ada','Akron','Yorkshire', 'Yorkville'];");
            sr.Close();
        }

      前台代码:
        <script type="text/javascript" src="http://www.cnblogs.com/js/jquery.js"></script>
        <script type='text/javascript' src='http://www.cnblogs.com/js/jquery.autocomplete.js'></script>
        <script type='text/javascript' src='http://www.cnblogs.com/js/localdata.js'></script>
        <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/js/jquery.autocomplete.css" />

        <script type="text/javascript">
            $().ready(function () {

                function log(event, data, formatted) {
                    $("<li>").html(!data ? "No match!" : "Selected: " + formatted).appendTo("#result");
                }

                function formatItem(row) {
                    return row[0] + " (<strong>id: " + row[1] + "</strong>)";
                }
                function formatResult(row) {
                    return row[0].replace(/(<.+?>)/gi, '');
                }
     
                $("#suggest13").autocomplete(MaterialNameLists, {
                    max: 15,    //列表里的条目数
                    minChars: 0,    //自动完成激活之前填入的最小字符
                    400,     //提示的宽度,溢出隐藏
                    scrollHeight: 400,   //提示的高度,溢出显示滚动条
                    matchContains: true,    //包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示
                    autoFill: false,    //自动填充

                    formatItem: function (row, i, max) {
                        return i + "/" + max + ": \"" + row.HelpCode + "\" [" + row.Materialcode + "][" + row.MaterialName + "][" + row.MaterialSpec + "]";
                    },
                    formatMatch: function (row, i, max) {
                        return row.HelpCode + " " + row.Materialcode + " " + row.MaterialName + " " + row.MaterialSpec;
                    },
                    formatResult: function (row) {
                        return row.MaterialName;
                    }
                }).result(function (event, row, formatted) {
                    var txt = '<%=inplace_Input.ClientID%>';
                    document.getElementById(txt).value = row.MaterialName;
                    document.getElementById('<%=inplace_Input.ClientID%>').value = row.MaterialName;
                });
            });

    </script>

    如何给文本框赋值:

       var txt = '<%=inplace_Input.ClientID%>';
       alert(txt.toString());
       document.getElementById(txt).value = row.MaterialName;
       document.getElementById('<%=inplace_Input.ClientID%>').value = row.MaterialName;

    将json字符串转换为json 对象:

       var MaterialNameLists = '<%=Materialcode_List%>';

       ////method 1:eval来转换JSON字符到Object//////
       var arr = eval('(' + MaterialNameLists + ')')

  • 相关阅读:
    如何使用SAP Intelligent Robotic Process Automation自动操作Excel
    OpenSAML 使用引导 IV: 安全特性
    Spring Cloud Zuul 网关使用与 OAuth2.0 认证授权服务
    微服务架构集大成者—Spring Cloud (转载)
    Spring Cloud Eureka 服务注册列表显示 IP 配置问题
    使用 Notification API 开启浏览器桌面提醒
    SignalR 中使用 MessagePack 序列化提高 WebSocket 通信性能
    配置 Nginx 的目录浏览功能
    关于 Nginx 配置 WebSocket 400 问题
    Migrate from ASP.NET Core 2.0 to 2.1
  • 原文地址:https://www.cnblogs.com/AriLee/p/1997265.html
Copyright © 2011-2022 走看看