7

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

tbl.addJSONData(objGridData); //err: tbl.addJSONData 不是函数！！

这是我收到此消息时 Firebug 显示的内容：

• objGridData 对象总计=1 页=1 记录=5 行=[5]
○ 页“1”
记录“5”
共“1”
行[对象 ID=1 PartnerID=BCN，对象 ID=2 PartnerID=BCN，对象 ID =3 PartnerID=BCN, 2 more... 0=Object 1=Object 2=Object 3=Object 4=Object]
(index) 0
(prop) ID (value) 1 (prop) PartnerID (value) "BCN" ( prop) DateTimeInserted (value) Thu May 29 2008 12:08:45 GMT-0700 (Pacific Daylight Time)
* 还有三行

这是变量 tbl (value) '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>

这是完整的功能：

 $('table.scroll').jqGrid({  
    datatype: function(postdata) {    
        mtype: "POST",    
    $.ajax({  
        url: 'EDI.asmx/GetTestJSONString',  
        type: "POST",  
        contentType: "application/json; charset=utf-8",  
        data: "{}",  
        dataType: "text", //not json . let me try to parse  
        success: function(msg, st) {  
            if (st == "success") {                    
                 var gridData;  

                //strip of "d:" notation  
                var result = JSON.parse(msg);   
                for (var property in result) {  
                    gridData = result[property];  
                    break;  
                }  

                var objGridData = eval("(" + gridData + ")"); //creates an object with visible data and structure  
                var tbl = jQuery('table.scroll')[0];  

                alert(objGridData.rows[0].PartnerID); //displays the correct data  

                //tbl.addJSONData(objGridData); //error received: addJSONData not a function  

                //error received: addJSONData not a function (This uses eval as shown in the documentation)  
                //tbl.addJSONData(eval("(" + objGridData + ")"));   

                //the line below evaluates fine, creating an object and visible data and structure  
                //var objGridData = eval("(" + gridData + ")");  
                //BUT, the same thing will not work here  
                //tbl.addJSONData(eval("(" + gridData + ")"));  
                //FIREBUG SHOWS THIS AS THE VALUE OF gridData:  
               // "{"total":"1","page":"1","records":"5","rows":[{"ID":1,"PartnerID":"BCN","DateTimeInserted":new Date(1214412777787)},{"ID":2,"PartnerID":"BCN","DateTimeInserted":new Date(1212088125000)},{"ID":3,"PartnerID":"BCN","DateTimeInserted":new Date(1212088125547)},{"ID":4,"PartnerID":"EHG","DateTimeInserted":new Date(1235603192033)},{"ID":5,"PartnerID":"EMDEON","DateTimeInserted":new Date(1235603192000)}]}"         

            }  
        }  
    });  
    },  
    jsonReader: {  
        root: "rows", //arry containing actual data  
        page: "page", //current page  
        total: "total", //total pages for the query  
        records: "records", //total number of records  
        repeatitems: false,  
        id: "ID" //index of the column with the PK in it   
    },  
    colNames: [  
        'ID', 'PartnerID', 'DateTimeInserted'  
          ],    
    colModel: [    
    { name: 'ID', index: 'ID', width: 55 },    
    { name: 'PartnerID', index: 'PartnerID', width: 90 },  
    { name: 'DateTimeInserted', index: 'DateTimeInserted', width: 100}],  
    rowNum: 10,  
    rowList: [10, 20, 30],  
    imgpath: 'http://localhost/DNN5/js/jQuery/jqGrid-3.4.3/themes/sand/images',  
    pager: jQuery('#pager'),  
    sortname: 'ID',  
    viewrecords: true,  
    sortorder: "desc",  
   caption: "TEST Example")};
4

8 回答 8

11

这是一个简单的例子......

您将需要https://github.com/douglascrockford/JSON-js/blob/master/json2.js 才能使其工作...

当然还有通常的 jquery 文件。

将此粘贴到网络服务

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

将此粘贴到您的 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>
于 2009-08-10T14:36:59.310 回答
3

通常，当您使用 jqGrid 收到“blah not a function”错误时，这是​​因为尚未加载正确的模块。addJSONData 函数在 grid.base.js 文件中定义。您可以检查 jquery.jqGrid.js 文件中的 jqGridInclude() 函数并确保 grid.base.js 被包含在模块变量的初始化中吗？

于 2009-07-28T20:27:06.940 回答
1

好吧，我在这里看到一件事不对：

var tbl = jQuery('table.scroll')[0];  
 //tbl.addJSONData(objGridData); //error received: addJSONData not a function

如果您确实想知道为什么会收到此错误，那是因为 tbl 没有该功能。

编辑：我很好奇，并检查了 jqGrid 是否将这些方法添加到 DOM 引用对象中。他们做到了。（我在这里使用萤火虫检查：http: //trirand.com/jqgrid/jqgrid.html）。

这里可能发生的一件事是您有多个“滚动”类表，并且您的 jquery 返回了错误的表。

于 2009-04-07T20:52:23.853 回答
1

您是否验证过 tbl 变量正在引用您的 jqgrid 实例？

尝试向您的表格元素添加一个 id 并获取对 jqgrid 的引用，例如：

var thegrid = jQuery("#mytableid")[0];
于 2009-04-07T20:57:00.957 回答
1

也许在堆栈溢出上发布的这段代码中有一些帮助？ jqgrid 与 asp.net webmethod 和 json 一起使用排序、分页、搜索和 LINQ——但需要动态运算符

于 2010-03-09T22:36:03.080 回答
0

由于我们有很多关于 ASP.NET WebForms 和 jqGrid 的问题，我们决定采用“组件”方式并实现与 asp:GridView 非常相似的东西。这样，您可以使用熟悉的 ASP.NET 页面生命周期、事件、数据源等来控制 jqGrid。

您可以在此处在线查看 Beta 版 - 目前提供 30 多个示例：

http://www.trirand.net/demo.aspx

如果对此感兴趣，它很可能也将发展为商业产品（将提供开源许可证）。同时，您可以使用 Reflector 来查看源代码以供参考（直到我们想办法让源代码在线可用）。我们在 ASP.NET 上使用 SVN，而不是在 js Core 上使用 gitHub，所以我们在这个方向上做了一些工作。

我们希望这对社区有所帮助。

Rumen Stankov Trirand

于 2009-10-01T05:18:13.507 回答
0

这是一个非常古老的问题，但是，我最近遇到了同样的问题。我在尝试开始的新博客上发布了我是如何实现这一目标的。

可能有更清洁的方法可以做到这一点，但这对我有用。到目前为止，我已经能够相当容易地从这个示例进行扩展。我的下一个障碍是让负载开始工作。

你可以在这里找到我的例子：

http://programming.webdad3.com/?p=3

于 2010-07-03T16:38:31.023 回答
0

WebForm 正在消亡，因此我们需要关注最新的技术，例如 asp.net MVC。我在这里找到了一个新的 asp.net jQGrid 集成http://www.techdoubts.net/2017/05/full-integration-dynamic-jqgrid-asp-net-mvc.html

于 2017-05-14T05:45:27.277 回答