Fatal编程技术网
  • asp.net/
  • 如何让jqGrid使用ASP.NET+；后端的JSON？

如何让jqGrid使用ASP.NET+；后端的JSON？

asp.net javascript jquery json jqgrid

如何让jqGrid使用ASP.NET+；后端的JSON？,asp.net,javascript,jquery,json,jqgrid,Asp.net,Javascript,Jquery,Json,Jqgrid,好的，我回来了。我将我的问题完全简化为三个简单的字段，使用addJSONData方法仍然停留在同一行。我已经在这上面呆了好几天了，不管我如何修改ajax调用，json字符串，等等等等…我都不能让它工作！当手动添加一行数据时，我甚至不能让它作为函数工作。任何人都可以发布一个使用ASP.NET和JSON的jqGrid工作示例吗？请包含2-3个字段（最好是字符串、整数和日期？）我很高兴看到jqGrid的一个工作示例，以及使用addJSONData方法手动添加JSON对象。非常感谢！！如果我能做到这一点

好的，我回来了。我将我的问题完全简化为三个简单的字段，使用addJSONData方法仍然停留在同一行。我已经在这上面呆了好几天了，不管我如何修改ajax调用，json字符串，等等等等…我都不能让它工作！当手动添加一行数据时，我甚至不能让它作为函数工作。任何人都可以发布一个使用ASP.NET和JSON的jqGrid工作示例吗？请包含2-3个字段（最好是字符串、整数和日期？）我很高兴看到jqGrid的一个工作示例，以及使用addJSONData方法手动添加JSON对象。非常感谢！！如果我能做到这一点，我将发布一个完整的代码示例，用于所有其他来自ASP.NET的帮助发布，JSON用户也坚持使用它。再一次。谢谢

tbl.addJSONData（OBJGRIDATA）//错误：tbl.addJSONData不是函数

以下是Firebug在我收到此消息时显示的内容：

•OBJGRIDATA对象总数=1页=1条记录=5行=[5]
○ 第“1”页
记录“5”
总计“1”
行[对象ID=1 PartnerID=BCN，对象ID=2 PartnerID=BCN，对象ID=3 PartnerID=BCN，还有两行…0=Object 1=Object 2=Object 3=Object 4=Object]
（索引）0
（道具）ID（值）1 （道具）PartnerID（值）“BCN” （prop）DateTimeInserted（value）Thu May 29 2008 12:08:45 GMT-0700（太平洋夏令时）
*还有三排

以下是变量tbl（值）'Table.scroll'的值

<TABLE cellspacing="0" cellpadding="0" border="0" style="width: 245px;" class="scroll grid_htable"><THEAD><TR><TH class="grid_sort grid_resize" style="width: 55px;"><SPAN> </SPAN><DIV id="jqgh_ID" style="cursor: pointer;">ID <IMG src="http://localhost/DNN5/js/jQuery/jqGrid-3.4.3/themes/sand/images/sort_desc.gif"/></DIV></TH><TH class="grid_resize" style="width: 90px;"><SPAN> </SPAN><DIV id="jqgh_PartnerID" style="cursor: pointer;">PartnerID </DIV></TH><TH class="grid_resize" style="width: 100px;"><SPAN> </SPAN><DIV id="jqgh_DateTimeInserted" style="cursor: pointer;">DateTimeInserted </DIV></TH></TR></THEAD></TABLE>
我发现这里有一件事不对：

var tbl = jQuery('table.scroll')[0];  
 //tbl.addJSONData(objGridData); //error received: addJSONData not a function
如果您确实想知道为什么会出现这个错误，那是因为tbl没有这个功能

编辑：我很好奇，并检查jqGrid是否将这些方法添加到DOM引用对象中。他们做到了。（我在这里使用firebug进行了检查：）

这里可能发生的一件事是，您有多个“scroll”类的表，而jquery返回的是错误的表

您是否验证了tbl变量正在获取对jqgrid实例的引用

尝试向table元素添加id，并获取对jqgrid的引用，如：

var thegrid = jQuery("#mytableid")[0];
通常，当jqGrid出现“blah not a function”错误时，是因为没有加载正确的模块。addJSONData函数在grid.base.js文件中定义。能否检查jquery.jqGrid.js文件中的jqGridInclude（）函数，并确保grid.base.js作为模块变量初始化的一部分被包括在内

下面是一个简单的例子

你需要 为了让这起作用

当然还有常见的jquery文件

将此粘贴到Web服务

// The lower case properties here are required to be lower case
// I cant find a way to rename them when they are serialized to JSON
// XmlElement("yournamehere") does not work for JSON :(
public class JQGrid
{
    public class Row
    {
        public int id { get; set; }
        public List<string> cell { get; set; }

        public Row()
        {
            cell = new List<string>();
        }
    }

    public int page { get; set; }
    public int total { get; set; }
    public int records { get; set; }
    public List<Row> rows { get; set; }

    public JQGrid()
    {
        rows = new List<Row>();
    }
}


[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class MyWebService : System.Web.Services.WebService
{

    [WebMethod(EnableSession = true)]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]    
    public JQGrid GetJQGrid(int page, int pageSize, string sortIndex, string sortDirection)
    {
        DataSet ds = SqlHelper.ExecuteDataset(SqlHelper.CONN_STRING, "udsp_GetMyData",pageIndex, pageSize);

        if (ds == null || ds.Tables.Count < 1)
            throw new Exception("Unable to retrieve data.");

        JQGrid jqGrid = new JQGrid();

        int i = 1;
        foreach (DataRow dataRow in ds.Tables[0].Rows)
        {
            JQGrid.Row row = new JQGrid.Row();

            row.id = Convert.ToInt32(dataRow["MyIdColumn"]);

            row.cell.Add(dataRow["MyIdColumn"].ToString());

            row.cell.Add(dataRow["MyColumn"].ToString());


            projectGrid.rows.Add(row);
        }

        jqGrid.page = 1; // Set this when you are actually doing paging... this is just a sample
        jqGrid.records = jqGrid.rows.Count;
        jqGrid.total = jqGrid.rows.Count;  // Set this to total pages in your result...

        return jqGrid;
    }
}

//此处的小写属性必须是小写
//当它们被序列化为JSON时，我找不到重命名它们的方法
//XmlElement（“yournamehere”）不适用于JSON：(
公共类JQGrid
{
公共类行
{
公共int id{get；set；}
公共列表单元格{get；set；}
公共行（）
{
单元格=新列表（）；
}
}
公共整型页{get；set；}
公共整数总计{get；set；}
公共int记录{get；set；}
公共列表行{get；set；}
公共JQGrid（）
{
行=新列表（）；
}
}
[WebService（命名空间=”http://tempuri.org/")]
[WebServiceBinding（ConformsTo=WsiProfiles.BasicProfile1_1）]
[脚本服务]
公共类MyWebService:System.Web.Services.WebService
{
[WebMethod（EnableSession=true）]
[ScriptMethod（ResponseFormat=ResponseFormat.Json）]
公共JQGrid GetJQGrid（int-page，int-pageSize，string-sortIndex，string-sortDirection）
{
数据集ds=SqlHelper.ExecuteDataset（SqlHelper.CONN_字符串，“udsp_GetMyData”，pageIndex，pageSize）；
if（ds==null | | ds.Tables.Count<1）
抛出新异常（“无法检索数据”）；
JQGrid JQGrid=新的JQGrid（）；
int i=1；
foreach（ds.Tables[0].行中的DataRow DataRow）
{
JQGrid.Row行=新的JQGrid.Row（）；
row.id=Convert.ToInt32（dataRow[“MyIdColumn]”）；
添加（dataRow[“MyIdColumn”].ToString（））；
添加（dataRow[“MyColumn”].ToString（））；
projectGrid.rows.Add（行）；
}
jqGrid.page=1；//在实际执行分页时设置此选项……这只是一个示例
jqGrid.records=jqGrid.rows.Count；
jqGrid.total=jqGrid.rows.Count；//将其设置为结果中的总页数。。。
返回jqGrid；
}
}
将此粘贴到您的aspx页面

<script type="text/javascript">
function getData(pdata) {
    var params = new Object();
    params.page = pdata.page;
    params.pageSize = pdata.rows;
    params.sortIndex = pdata.sidx;
    params.sortDirection = pdata.sord;


    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "/CLM/CLM.asmx/GetProjectGrid2",
        data: JSON.stringify(params),
        dataType: "json",
        success: function(data, textStatus) {
            if (textStatus == "success") {
                var thegrid = $("#testGrid")[0];
                thegrid.addJSONData(data.d);
            }
        },
        error: function(data, textStatus) {
            alert('An error has occured retrieving data!');
        }
    });
}

var gridimgpath = '/clm/css/ui-lightness/images';
$(document).ready(function() {
    $("#testGrid").jqGrid({
        datatype: function(pdata) {
            getData(pdata);
        },
        colNames: ['My Id Column', 'My Column'],
        colModel: [
            { name: 'MyIdColumn', index: 'MyIdColumn', width: 150 },
            { name: 'My Column', index: 'MyColumn', width: 250 }
        ],
        rowNum: 10,
        rowList: [10, 20, 30],
        imgpath: gridimgpath,
        pager: jQuery('#pagerdt'),
        sortname: 'id',
        viewrecords: false,
        sortorder: "desc",
        caption: "Projects",
        cellEdit: false
    });
});
</script>


函数getData（pdata）{
var params=新对象（）；
params.page=pdata.page；
params.pageSize=pdata.rows；
params.sortIndex=pdata.sidx；
params.sortDirection=pdata.sord；
$.ajax({
类型：“POST”，
contentType:“应用程序/json；字符集=utf-8”，
url:“/CLM/CLM.asmx/GetProjectGrid2”，
数据：JSON.stringify（params），
数据类型：“json”，
成功：功能（数据、文本状态）{
如果（textStatus==“成功”）{
var thegrid=$（“#测试网格”）[0]；
addJSONData（data.d）；
}
},
错误：函数（数据、文本状态）{
警报（'检索数据时出错！'）；
}
});
}
var gridimgpath='/clm/css/ui lightness/images'；
$（文档）.ready（函数（）{
$（“#testGrid”）.jqGrid({
数据类型：函数（pdata）{
获取数据（pdata）；
},
colNames:[“我的Id列”，“我的列”]，
colModel：[
{name:'MyIdColumn'，index:'MyIdColumn'，宽度：150}，
{name:'My Column'，index:'MyColumn'，宽度：250}
],
rowNum:10，
行列表：[10,20,30]，
imgpath:gridimgpath，
寻呼机：jQuery（“#pagerdt”），
分类

<script type="text/javascript">
function getData(pdata) {
    var params = new Object();
    params.page = pdata.page;
    params.pageSize = pdata.rows;
    params.sortIndex = pdata.sidx;
    params.sortDirection = pdata.sord;


    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "/CLM/CLM.asmx/GetProjectGrid2",
        data: JSON.stringify(params),
        dataType: "json",
        success: function(data, textStatus) {
            if (textStatus == "success") {
                var thegrid = $("#testGrid")[0];
                thegrid.addJSONData(data.d);
            }
        },
        error: function(data, textStatus) {
            alert('An error has occured retrieving data!');
        }
    });
}

var gridimgpath = '/clm/css/ui-lightness/images';
$(document).ready(function() {
    $("#testGrid").jqGrid({
        datatype: function(pdata) {
            getData(pdata);
        },
        colNames: ['My Id Column', 'My Column'],
        colModel: [
            { name: 'MyIdColumn', index: 'MyIdColumn', width: 150 },
            { name: 'My Column', index: 'MyColumn', width: 250 }
        ],
        rowNum: 10,
        rowList: [10, 20, 30],
        imgpath: gridimgpath,
        pager: jQuery('#pagerdt'),
        sortname: 'id',
        viewrecords: false,
        sortorder: "desc",
        caption: "Projects",
        cellEdit: false
    });
});
</script>