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 >
</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));
}
