Jquery Easy UI 中的datagrid通過url調用webservice返回json數據

一、前端顯示代碼

 $('#tt').datagrid({

                title: "商品信息",

                loadMsg: "數據加載中，請稍后...",

                width: 700,

                pageNumber: 1,

                singleSelect: true,

                pageSize: 10,

                collapsible: true,

 

     

           pagination: true,

                rownumbers: true,

                idField: "productNo",

                url: "WebService.asmx/GetProductInfo",//這個是返回序列成的json的格式

                columns: [[

                { field: "pictureUrl", title: "圖片", align: "center", sortable: true, width: 267, formatter: function (value, rec) { return "<img  src='" + value + "'/>"; } },//這里是為了顯示圖片而用的，顯示格式

                { field: "productNo", title: "商品編號", align: "center", sortable: true, width: 100 },

                { field: "productName", title: "商品名稱", align: "center", sortable: true, width: 100 },

                { field: "price", title: "商品單價", align: "center", sortable: true, width: 100 },

                { field: "stockNum", title: "庫存數量", align: "center", sortable: true, width: 100 }

                ]],

                onDblClickRow: function (rowIndex, rowData) {//雙擊事件

                    alert(rowData.productName);

                }

            });

  <table id="tt">

   </table>

二、后台數據生成

先定義類

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

 

namespace OrderManagerSys

{

    /// <summary>

    /// 商品信息類

    /// </summary>

    [Serializable]

    public class ProductInfo

    {

        private string pictureUrl = string.Empty;

        /// <summary>

        /// 商品圖片地址

        /// </summary>

        public string PictureUrl

        {

            get { return this.pictureUrl; }

            set { this.pictureUrl = value; }

        }

        private string productName = string.Empty;

        /// <summary>

        /// 商品名稱

        /// </summary>

        public string ProductName

        {

            get { return this.productName; }

            set { this.productName = value; }

        }

        private string productNo = string.Empty;

        /// <summary>

        /// 商品編號

        /// </summary>

        public string ProductNo

        {

            get { return this.productNo; }

            set { this.productNo = value; }

        }

        private decimal price = 0.0m;

        /// <summary>

        /// 商品價格

        /// </summary>

        public decimal Price

        {

            set { this.price = value; }

            get { return this.price; }

        }

        private int stockNum = 0;

        /// <summary>

        /// 庫存數量

        /// </summary>

        public int StockNum

        {

            set { this.stockNum = value; }

            get { return this.stockNum; }

        }

        public ProductInfo(string pictureUrl, string productNo, string productName, decimal price, int stockNum)

        {

            this.pictureUrl = pictureUrl;

            this.productName = productName;

            this.productNo = productNo;

            this.price = price;

            this.stockNum = stockNum;

        }

        public ProductInfo()

        { }

    }

}

 

序列化成json數據

 

       /// <summary>

        /// 獲取商品信息

        /// </summary>

        /// <returns></returns>

        public string GetProductInfo()

        {

            try

            {

                List<ProductInfo> productInfo = new List<ProductInfo>();

                DataContractJsonSerializer jsonSer = new DataContractJsonSerializer(productInfo.GetType());

                MemoryStream ms = new MemoryStream();

                dataOperate = new CommonDataOperate();

                reader = dataOperate.GetSqlDataReaderBySql("exec Get_AddProductInfo_Proc");

                while (reader.Read())

                {

                    productInfo.Add(new ProductInfo(reader.GetString(0), reader.GetString(1), reader.GetString(2), reader.GetDecimal(3), reader.GetInt32(4)));

                }

                jsonSer.WriteObject(ms, productInfo);

                string result = Encoding.UTF8.GetString(ms.ToArray());

                //FileStream fs = new FileStream(HttpContext.Current.Server.MapPath("product.json"), FileMode.Create, FileAccess.Write);

                //fs.Write(ms.ToArray(), 0, ms.ToArray().Length);

                //fs.Close();

                ms.Close();

                return result;

            }

            catch (Exception ex)

            {

                throw new Exception(ex.Message, ex);

            }

            //return result;

        }

 

webservice方法

        [WebMethod]

        public void GetProductInfo()

        {

            //Context.Response.ContentType = "application/html;charset=utf-8";

            Context.Response.Write(new OrderManagermentCs().GetProductInfo());

            

        }

 

datagrid url我想傳遞參數給webservice
一：js代碼
$(function(){
        $('#dg').datagrid({  

        url:'RecordPers.asmx/GetRecordPers1',  
        queryParams:'{"depa":"0202"}', //應該是：queryParams:{depa:'0202'},

        columns:[[  
            {field:'ID',title:'Code',width:100},  
            {field:'CONTENT',title:'Name',width:100} 
        ]]  
    }) ;
        });
    </script>

二：WebService短處理
[WebMethod]
        public void GetRecordPers1(string depa)
        {
            string sql="select t.id,t.content from RECORD_PERS t where t.depa='"+depa+"'";
            MyOraComm.ConnForOracle cfo=new MyOraComm.ConnForOracle("dbf_connstr");
            cfo.OpenConn();
            DataSet ds=cfo.ReturnDataSet(sql,"jdbg");
            cfo.CloseConn();
            Context.Response.Write( DataToJson(ds.Tables[0],ds.Tables[0].Rows.Count));

        }