这些天一直在研究Jquery,发现里面的GRID控件真的很好很强大。于是乎想在项目中应用flexigrid.
在网上搜索了一下,有如下示例参考一 数据源以XML返回的
参考二 采用MVC模式的
目前我的项目是用dataset得到的数据,就是说,按参考一中的方法,建立了一个Web Service ,然后把dataset转为json(而不是XML返回),但是这一步就无法成功,肯请各位大大出手帮忙!
在网上搜索了一下,有如下示例参考一 数据源以XML返回的
参考二 采用MVC模式的
目前我的项目是用dataset得到的数据,就是说,按参考一中的方法,建立了一个Web Service ,然后把dataset转为json(而不是XML返回),但是这一步就无法成功,肯请各位大大出手帮忙!
解决方案 »
- asp.net取客户端的主机名和IP地址的问题
- 博客网站和普通网站有何区别
- girdview加入一列问题
- <%@ OutputCache Duration="100000" VaryByParam="*" %>
- 图片问题,请教各位大侠???
- 有没有人需要用服务器的?我有一台想托管,大家共用,找几个人分摊一下!!!
- asp.net 中直接打开word文档,不需要保存或打开操作,拜托各位朋友帮帮忙。
- web程序调用win程序(win程序在服务器端)怎么向win程序传递参数
- 几天没上来,怎么我的专家分在不断的减少啊?
- 大家好,哪里有:matlab安装程序下载, 谢谢
- 如何设置loginstate的状态为已登录网站的状态
- 求助!word在线编辑器
{
if (ds == null || ds.Tables.Count <= 0 || ds.Tables[0].Rows.Count <= 0)
{
//如果查询到的数据为空则返回标记ok:false
return "{\"ok\":false}";
}
StringBuilder sb = new StringBuilder();
sb.Append("{\"ok\":true,");
foreach (DataTable dt in ds.Tables)
{
sb.Append(string.Format("\"{0}\":[",dt.TableName)); foreach (DataRow dr in dt.Rows)
{
sb.Append("{");
for (int i = 0; i < dr.Table.Columns.Count; i++)
{
sb.AppendFormat("\"{0}\":\"{1}\",", dr.Table.Columns[i].ColumnName.Replace("\"", "\\\"").Replace("\'", "\\\'"), FieldTypeFilter.ObjToStr(dr[i]).Replace("\"", "\\\"").Replace("\'", "\\\'"));
}
sb.Remove(sb.ToString().LastIndexOf(','), 1);
sb.Append("},");
} sb.Remove(sb.ToString().LastIndexOf(','), 1);
sb.Append("],");
}
sb.Remove(sb.ToString().LastIndexOf(','), 1);
sb.Append("}");
return sb.ToString();
}
引入
using Newtonsoft.Json;
using Newtonsoft.Json.Converters;
用下面的方式string jsonString= JsonConvert.SerializeObject(dataset[0], new IsoDateTimeConverter());
"[{\"con_id\":0,\"pa_id\":0,\"pro_addr\":null,\"pro_builder\":\"北京稻香湖大酒店\",\"pro_cat\":null,\"pro_consigner\":\"北京稻香湖大酒店\",\"pro_content\":null,\"pro_date\":\"\\/Date(1260720000000+0800)\\/\",\"pro_dates\":null,\"pro_file\":null,\"pro_id\":17,\"pro_industry\":null,\"pro_invest\":\"4亿\",\"pro_key\":null,\"pro_mbasic\":null,\"pro_name\":\"稻香湖\",\"pro_no\":null,\"pro_others\":null,\"pro_plan\":null,\"pro_process\":null,\"pro_request\":null,\"pro_source\":null,\"pro_status\":0,\"pro_type\":null},{\"con_id\":0,\"pa_id\":0,\"pro_addr\":null,\"pro_builder\":\"自行车击剑运动管理中心\",\"pro_cat\":null,\"pro_consigner\":\"奥组委\",\"pro_content\":null,\"pro_date\":\"\\/Date(1260720000000+0800)\\/\",\"pro_dates\":null,\"pro_file\":null,\"pro_id\":18,\"pro_industry\":null,\"pro_invest\":\"8亿\",\"pro_key\":null,\"pro_mbasic\":null,\"pro_name\":\"自行车馆全过程跟踪审计\",\"pro_no\":null,\"pro_others\":null,\"pro_plan\":null,\"pro_process\":null,\"pro_request\":null,\"pro_source\":null,\"pro_status\":0,\"pro_type\":null},{\"con_id\":0,\"pa_id\":0,\
"pro_addr\":null,\"pro_builder\":\"北京电视台\",\"pro_cat\":null,\"pro_consigner\":\"北京电视台\",\"pro_content\":null,\"pro_date\":\"\\/Date(1260720000000+0800)\\/\",\"pro_dates\":null,\"pro_file\":null,\"pro_id\":19,\"pro_industry\":null,\"pro_invest\":\"22亿(不含设备)\",\"pro_key\":null,\"pro_mbasic\":null,\"pro_name\":\"北京电视中心\",\"pro_no\":null,\"pro_others\":null,\"pro_plan\":null,\"pro_process\":null,\"pro_request\":null,\"pro_source\":null,\"pro_status\":0,\"pro_type\":null},{\"con_id\":0,\"pa_id\":0,\"pro_addr\":null,\"pro_builder\":\"中国储备粮管理总公司山西分公司\",\"pro_cat\":null,\"pro_consigner\":\"中国储备粮管理总公司\",\"pro_content\":null,\"pro_date\":\"\\/Date(1260720000000+0800)\\/\",\"pro_dates\":null,\"pro_file\":null,\"pro_id\":20,\"pro_industry\":null,\"pro_invest\":\"3.2亿\",\"pro_key\":null,\"pro_mbasic\":null,\"pro_name\":\"中国储备粮管理总公司山西分公司专项审计合同\",\"pro_no\":null,\"pro_others\":null,\"pro_plan\":null,\"pro_process\":null,\"pro_request\":null,\"pro_source\":null,\"pro_status\":0,\"pro_type\":null},{\"con_id\":0,\"pa_id\":0,\"p
ro_addr\":null,\"pro_builder\":\"中国储备粮管理总公司山西分公司\",\"pro_cat\":null,\"pro_consigner\":\"中国储备粮管理总公司\",\"pro_content\":null,\"pro_date\":\"\\/Date(1260720000000+0800)\\/\",\"pro_dates\":null,\"pro_file\":null,\"pro_id\":21,\"pro_industry\":null,\"pro_invest\":\"3.2亿\",\"pro_key\":null,\"pro_mbasic\":null,\"pro_name\":\"中国储备粮管理总公司山西分公司专项审计合同\",\"pro_no\":null,\"pro_others\":null,\"pro_plan\":null,\"pro_process\":null,\"pro_request\":null,\"pro_source\":null,\"pro_status\":0,\"pro_type\":null},{\"con_id\":0,\"pa_id\":0,\"pro_addr\":null,\"pro_builder\":\"同仁堂\",\"pro_cat\":null,\"pro_consigner\":\"同仁堂\",\"pro_content\":null,\"pro_date\":\"\\/Date(1260720000000+0800)\\/\",\"pro_dates\":null,\"pro_file\":null,\"pro_id\":22,\"pro_industry\":null,\"pro_invest\":\"8亿\",\"pro_key\":null,\"pro_mbasic\":null,\"pro_name\":\"同仁堂亦庄厂房项目结算审核\",\"pro_no\":null,\"pro_others\":null,\"pro_plan\":null,\"pro_process\":null,\"pro_request\":null,\"pro_source\":null,\"pro_status\":0,\"pro_type\":null},{\"con_id\":0,\"pa_id\":0,\"pro_add
r\":null,\"pro_builder\":\"中电投蒙东电力有限公司\",\"pro_cat\":null,\"pro_consigner\":\"中国电力投资(集团)有限公司\",\"pro_content\":null,\"pro_date\":\"\\/Date(1260720000000+0800)\\/\",\"pro_dates\":null,\"pro_file\":null,\"pro_id\":23,\"pro_industry\":null,\"pro_invest\":\"46亿\",\"pro_key\":null,\"pro_mbasic\":null,\"pro_name\":\"大板电厂全过程跟踪审计\",\"pro_no\":null,\"pro_others\":null,\"pro_plan\":null,\"pro_process\":null,\"pro_request\":null,\"pro_source\":null,\"pro_status\":0,\"pro_type\":null},{\"con_id\":0,\"pa_id\":0,\"pro_addr\":null,\"pro_builder\":\"云南元双公路指挥部\",\"pro_cat\":null,\"pro_consigner\":\"云南省交通建设厅\",\"pro_content\":null,\"pro_date\":\"\\/Date(1260720000000+0800)\\/\",\"pro_dates\":null,\"pro_file\":null,\"pro_id\":24,\"pro_industry\":null,\"pro_invest\":\"36亿\",\"pro_key\":null,\"pro_mbasic\":null,\"pro_name\":\"云南元双公路\",\"pro_no\":null,\"pro_others\":null,\"pro_plan\":null,\"pro_process\":null,\"pro_request\":null,\"pro_source\":null,\"pro_status\":0,\"pro_type\":null},{\"con_id\":0,\"pa_id\":0,\"pro_addr\":null,\"p
ro_builder\":\"单位建设\",\"pro_cat\":null,\"pro_consigner\":\"测试项目单位\",\"pro_content\":null,\"pro_date\":\"\\/Date(1260720000000+0800)\\/\",\"pro_dates\":null,\"pro_file\":null,\"pro_id\":25,\"pro_industry\":null,\"pro_invest\":\"300大赦令\",\"pro_key\":null,\"pro_mbasic\":null,\"pro_name\":\"测试项目一啊\",\"pro_no\":null,\"pro_others\":null,\"pro_plan\":null,\"pro_process\":null,\"pro_request\":null,\"pro_source\":null,\"pro_status\":0,\"pro_type\":null}]"得到这个,怎么就显示不了尼
"[{\"con_id\":0,\"pa_id\":0,\"pro_addr\":null,\"pro_builder\":\"北京稻香湖大酒店\",\"pro_cat\":null,\"pro_consigner\":\"北京稻香湖大酒店\",\"pro_content\":null,\"pro_date\":\"\\/Date(1260720000000+0800)\\/\",\"pro_dates\":null,\"pro_file\":null,\"pro_id\":17,\"pro_industry\":null,\"pro_invest\":\"4亿\",\"pro_key\":null,\"pro_mbasic\":null,\"pro_name\":\"稻香湖\",\"pro_no\":null,\"pro_others\":null,\"pro_plan\":null,\"pro_process\":null,\"pro_request\":null,\"pro_source\":null,\"pro_status\":0,\"pro_type\":null},{\"con_id\":0,\"pa_id\":0,\"pro_addr\":null,\"pro_builder\":\"自行车击剑运动管理中心\",\"pro_cat\":null,\"pro_consigner\":\"奥组委\",\"pro_content\":null,\"pro_date\":\"\\/Date(1260720000000+0800)\\/\",\"pro_dates\":null,\"pro_file\":null,\"pro_id\":18,\"pro_industry\":null,\"pro_invest\":\"8亿\",\"pro_key\":null,\"pro_mbasic\":null,\"pro_name\":\"自行车馆全过程跟踪审计\",\"pro_no\":null,\"pro_others\":null,\"pro_plan\":null,\"pro_process\":null,\"pro_request\":null,\"pro_source\":null,\"pro_status\":0,\"pro_type\":null},{\"con_id\":0,\"pa_id\":0,\
"pro_addr\":null,\"pro_builder\":\"北京电视台\",\"pro_cat\":null,\"pro_consigner\":\"北京电视台\",\"pro_content\":null,\"pro_date\":\"\\/Date(1260720000000+0800)\\/\",\"pro_dates\":null,\"pro_file\":null,\"pro_id\":19,\"pro_industry\":null,\"pro_invest\":\"22亿(不含设备)\",\"pro_key\":null,\"pro_mbasic\":null,\"pro_name\":\"北京电视中心\",\"pro_no\":null,\"pro_others\":null,\"pro_plan\":null,\"pro_process\":null,\"pro_request\":null,\"pro_source\":null,\"pro_status\":0,\"pro_type\":null},{\"con_id\":0,\"pa_id\":0,\"pro_addr\":null,\"pro_builder\":\"中国储备粮管理总公司山西分公司\",\"pro_cat\":null,\"pro_consigner\":\"中国储备粮管理总公司\",\"pro_content\":null,\"pro_date\":\"\\/Date(1260720000000+0800)\\/\",\"pro_dates\":null,\"pro_file\":null,\"pro_id\":20,\"pro_industry\":null,\"pro_invest\":\"3.2亿\",\"pro_key\":null,\"pro_mbasic\":null,\"pro_name\":\"中国储备粮管理总公司山西分公司专项审计合同\",\"pro_no\":null,\"pro_others\":null,\"pro_plan\":null,\"pro_process\":null,\"pro_request\":null,\"pro_source\":null,\"pro_status\":0,\"pro_type\":null},{\"con_id\":0,\"pa_id\":0,\"p
ro_addr\":null,\"pro_builder\":\"中国储备粮管理总公司山西分公司\",\"pro_cat\":null,\"pro_consigner\":\"中国储备粮管理总公司\",\"pro_content\":null,\"pro_date\":\"\\/Date(1260720000000+0800)\\/\",\"pro_dates\":null,\"pro_file\":null,\"pro_id\":21,\"pro_industry\":null,\"pro_invest\":\"3.2亿\",\"pro_key\":null,\"pro_mbasic\":null,\"pro_name\":\"中国储备粮管理总公司山西分公司专项审计合同\",\"pro_no\":null,\"pro_others\":null,\"pro_plan\":null,\"pro_process\":null,\"pro_request\":null,\"pro_source\":null,\"pro_status\":0,\"pro_type\":null},{\"con_id\":0,\"pa_id\":0,\"pro_addr\":null,\"pro_builder\":\"同仁堂\",\"pro_cat\":null,\"pro_consigner\":\"同仁堂\",\"pro_content\":null,\"pro_date\":\"\\/Date(1260720000000+0800)\\/\",\"pro_dates\":null,\"pro_file\":null,\"pro_id\":22,\"pro_industry\":null,\"pro_invest\":\"8亿\",\"pro_key\":null,\"pro_mbasic\":null,\"pro_name\":\"同仁堂亦庄厂房项目结算审核\",\"pro_no\":null,\"pro_others\":null,\"pro_plan\":null,\"pro_process\":null,\"pro_request\":null,\"pro_source\":null,\"pro_status\":0,\"pro_type\":null},{\"con_id\":0,\"pa_id\":0,\"pro_add
r\":null,\"pro_builder\":\"中电投蒙东电力有限公司\",\"pro_cat\":null,\"pro_consigner\":\"中国电力投资(集团)有限公司\",\"pro_content\":null,\"pro_date\":\"\\/Date(1260720000000+0800)\\/\",\"pro_dates\":null,\"pro_file\":null,\"pro_id\":23,\"pro_industry\":null,\"pro_invest\":\"46亿\",\"pro_key\":null,\"pro_mbasic\":null,\"pro_name\":\"大板电厂全过程跟踪审计\",\"pro_no\":null,\"pro_others\":null,\"pro_plan\":null,\"pro_process\":null,\"pro_request\":null,\"pro_source\":null,\"pro_status\":0,\"pro_type\":null},{\"con_id\":0,\"pa_id\":0,\"pro_addr\":null,\"pro_builder\":\"云南元双公路指挥部\",\"pro_cat\":null,\"pro_consigner\":\"云南省交通建设厅\",\"pro_content\":null,\"pro_date\":\"\\/Date(1260720000000+0800)\\/\",\"pro_dates\":null,\"pro_file\":null,\"pro_id\":24,\"pro_industry\":null,\"pro_invest\":\"36亿\",\"pro_key\":null,\"pro_mbasic\":null,\"pro_name\":\"云南元双公路\",\"pro_no\":null,\"pro_others\":null,\"pro_plan\":null,\"pro_process\":null,\"pro_request\":null,\"pro_source\":null,\"pro_status\":0,\"pro_type\":null},{\"con_id\":0,\"pa_id\":0,\"pro_addr\":null,\"p
ro_builder\":\"单位建设\",\"pro_cat\":null,\"pro_consigner\":\"测试项目单位\",\"pro_content\":null,\"pro_date\":\"\\/Date(1260720000000+0800)\\/\",\"pro_dates\":null,\"pro_file\":null,\"pro_id\":25,\"pro_industry\":null,\"pro_invest\":\"300大赦令\",\"pro_key\":null,\"pro_mbasic\":null,\"pro_name\":\"测试项目一啊\",\"pro_no\":null,\"pro_others\":null,\"pro_plan\":null,\"pro_process\":null,\"pro_request\":null,\"pro_source\":null,\"pro_status\":0,\"pro_type\":null}]"
可以生成这个JSON,哪里有错呢??
<script type="text/javascript">
$(document).ready(new function () { $("#fgrdProduct").flexigrid
(
{
url: 'JSON/ProList.asmx/GetProList',
dataType: 'json',
colModel: [
{ display: 'Id', name: 'pro_id', width: 20, sortable: true, align: 'left' },
{ display: 'Name', name: 'pro_name', width: 180, sortable: true, align: 'left' },
{ display: 'Consigner', name: 'pro_consigner', width: 180, sortable: true, align: 'left' },
{ display: 'Builder', name: 'pro_builder', width: 120, sortable: true, align: 'left' },
{ display: 'Invest', name: 'pro_invest', width: 130, sortable: true, align: 'left', hide: false },
{ display: 'Date', name: 'pro_date', width: 80, sortable: true, align: 'left' }
],
searchitems: [
{ display: 'Name', name: 'pro_name' },
{ display: 'Consigner', name: 'pro_consigner' },
{ display: 'Builder', name: 'pro_builder' },
{ display: 'Invest', name: 'pro_invest' },
{ display: 'Date', name: 'pro_date' },
{ display: 'Id', name: 'pro_id', isdefault: true }
],
sortname: "pro_id",
sortorder: "asc",
usepager: true,
title: '项目列表',
useRp: true,
rp: 10,
showTableToggleBtn: true,
width: 805,
onSubmit: addFormData,
height: 200
}
); //This function adds paramaters to the post of flexigrid. You can add a verification as well can
//return false if you don't want flexigrid to submit
function addFormData() { //passing a form object to serializeArray will get the valid data from all the objects, but, if you pass a non-form object,
//you have to specify the input elements that the data will come from
var dt = $('#sform').serializeArray();
$("#fgrdProduct").flexOptions({ params: dt });
return true;
} $('#sform').submit
(
function () {
$('#fgrdProduct').flexOptions({ newp: 1 }).flexReload();
return false;
}
); }); </script>
$(document).ready(
newfunction () {嗯,被它迷惑了一下,这种写法虽然古怪,不过却也是可以跑得通的。根本的问题是你返回的数据格式不对,flexigrid要求的格式:{
page: 1, // 页号,从1开始
total: 15, // 总记录数
rows: [
// 'id' 是行的标识
// 'cell' 一个数组放每一列的数据
{id: 3879, cell: ["", "", "", ""]},
]
}
你现在返回的是一个数组,其中每一项都是一个对象,所以不符合flexigrid的要求
{page:1,total:1,rows:[{id:17,cell:[\"17\",\"稻香湖\",\"北京稻香湖大酒店\",\"北京稻香湖大酒店\",\"4亿\"]}]}这样还是不行尼
success: function(data){g.addData(data);},
改成
success: function(data){alert(data); g.addData(data);},看看有没有收到返回
error: function(XMLHttpRequest, textStatus, errorThrown) { try { if (p.onError) p.onError(XMLHttpRequest, textStatus, errorThrown); } catch (e) {} }
这句也改下:
error: function(XMLHttpRequest, textStatus, errorThrown) { alert(errThrown); try { if (p.onError) p.onError(XMLHttpRequest, textStatus, errorThrown); } catch (e) {} }看下有没有出错信息
return strRtn;上面是返回的数据,下面是前台:
<table id="fgrdProduct" style="display:none;"></table>
<script type="text/javascript">
$(document).ready(function () { $("#fgrdProduct").flexigrid
(
{
url: 'JSON/ProList.asmx/GetProList',
dataType: 'json',
colModel: [
{ display: 'Id', name: 'pro_id', width: 20, sortable: true, align: 'left' },
{ display: 'Name', name: 'pro_name', width: 180, sortable: true, align: 'left' },
{ display: 'Consigner', name: 'pro_consigner', width: 180, sortable: true, align: 'left' },
{ display: 'Builder', name: 'pro_builder', width: 120, sortable: true, align: 'left' },
{ display: 'Invest', name: 'pro_invest', width: 130, sortable: true, align: 'left', hide: false }
],
searchitems: [
{ display: 'Name', name: 'pro_name' },
{ display: 'Consigner', name: 'pro_consigner' },
{ display: 'Builder', name: 'pro_builder' },
{ display: 'Invest', name: 'pro_invest' },
{ display: 'Id', name: 'pro_id', isdefault: true }
],
sortname: "id",
sortorder: "asc",
usepager: true,
title: '项目列表',
useRp: true,
rp: 10,
showTableToggleBtn: true,
width: 805,
onSubmit: addFormData,
height: 200
}
); //This function adds paramaters to the post of flexigrid. You can add a verification as well can
//return false if you don't want flexigrid to submit
function addFormData() { //passing a form object to serializeArray will get the valid data from all the objects, but, if you pass a non-form object,
//you have to specify the input elements that the data will come from
var dt = $('#sform').serializeArray();
$("#fgrdProduct").flexOptions({ params: dt });
return true;
} $('#sform').submit
(
function () {
$('#fgrdProduct').flexOptions({ newp: 1 }).flexReload();
return false;
}
); }); </script>
error: function(XMLHttpRequest, textStatus, errorThrown) { alert(XMLHttpRequest.responseBody); try { if (p.onError) p.onError(XMLHttpRequest, textStatus, errorThrown); } catch (e) {} }看下什么错
{
int page = 1;
if (HttpContext.Current.Request.Form["page"] != null)
{
page = int.Parse(HttpContext.Current.Request.Form["page"].ToString());
}
int rp = 1;
if (HttpContext.Current.Request.Form["rp"] != null)
{
rp = int.Parse(HttpContext.Current.Request.Form["rp"].ToString());
}
string sortname = "pro_id";
if (HttpContext.Current.Request.Form["sortname"] != null)
{
sortname = HttpContext.Current.Request.Form["sortname"].ToString();
} string whereCondition = "pro_id<20";
if (HttpContext.Current.Request.Form["qtype"] != null && HttpContext.Current.Request.Form["query"] != null && HttpContext.Current.Request.Form["query"].ToString() != string.Empty)
{
whereCondition = BuildWhereCondition(HttpContext.Current.Request.Form["qtype"].ToString(), HttpContext.Current.Request.Form["query"].ToString());
}
string sortorder = "asc";
if (HttpContext.Current.Request.Form["sortorder"] != null)
{
sortorder = HttpContext.Current.Request.Form["sortorder"].ToString();
}
string sortExp = sortname + " " + sortorder;
int start = ((page - 1) * rp);
List<Model.project> proList = new List<Model.project>();
// DataSet ds = new DataSet();
BLL.project bll = new BLL.project();
proList = bll.GetJSONList(whereCondition, sortExp, start, rp); // return TzCommon.JsonSerializer.ToJson(proList);
// return newDoc;
string strRtn = "{page:1,total:1,rows:[{id:17,cell:[\"17\",\"稻香湖\",\"北京稻香湖大酒店\",\"北京稻香湖大酒店\",\"4亿\"]}]}";
return strRtn; }
第624,625行:
dataType: "xml",
success: function(data){eval("data="+$(data).text()); g.addData(data); },
调用webService的方法 不是url: 'JSON/ProList.asmx/GetProList' 这样写的那应该怎么写呢?
http://www.yideal.com/index.php?option=com_content&view=article&id=81:flexigrid-donet&catid=44:donet-trick-articles&Itemid=65
flexigrid插件json+.net分页操作
http://www.yideal.com/index.php?option=com_content&view=article&id=82:flexigrid-json-donet-paging&catid=44:donet-trick-articles&Itemid=65这里有两个flexigrid的例子看看能有解决你的问题?