如何在jqxgrid中使用后面代码中的数据表

Hi i have DataTable which is binding to Gridview. But in need to bind that know to jqxgrid or jqxdatatable. After googling so many times i didn't got proper solution for this.

嗨我有DataTable绑定到Gridview。但需要将知道绑定到jqxgrid或jqxdatatable。谷歌搜索了这么多次后，我没有得到适当的解决方案。

       DataTable tb1=  qry.GetTicketDetails();
       serviceWindow.DataSource = tb;
       serviceWindow.DataBind();

This what i'm doing actully now.

这就是我现在正在做的事情。

IN jquery i can take XML shown in below.

在jquery中，我可以使用下面显示的XML。

   var source =
        {
            dataType: "json",
            dataFields: [
                { name: 'name', type: 'string' },
                { name: 'type', type: 'string' },
                { name: 'calories', type: 'int' },
                { name: 'totalfat', type: 'string' },
                { name: 'protein', type: 'string' }
            ],
            id: 'id',
            url: "data/ticket.XML",  //how to take datatable from code behind file
        };

1 个解决方案

#1

.aspx code -->>

.aspx代码 - >>

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestCellSelection.aspx.cs" Inherits="CourierApp.Project.TestCellSelection" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title id='Description'></title>
    <link rel="stylesheet" href="../JQWidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../JQWidgets/scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../JQWidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../JQWidgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../JQWidgets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../JQWidgets/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../JQWidgets/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../JQWidgets/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../JQWidgets/jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../JQWidgets/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../JQWidgets/scripts/demos.js"></script>
    <script type="text/javascript" src="../JQWidgets/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../JQWidgets/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../JQWidgets/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../JQWidgets/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../JQWidgets/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../JQWidgets/jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../JQWidgets/jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../JQWidgets/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript">
        $(document).load(function () {


        });

    </script>
    <script type="text/javascript">

        $(document).ready(function () {
            $("#button").jqxButton({
                theme: 'energyblue',
                height: 30
            });
            $("#button").click(function () {
                var cells = $('#jqxgrid').jqxGrid('getselectedcells');
                var cellInfo = "";
                for (var i = 0; i < cells.length; i++) {
                    var cell = cells[i];
                    cellInfo += "\nRow: " + cell.rowindex + ", " + cell.datafield;
                }
                alert(cellInfo);
            });
            //GetData
            var data = {};
            var dataFelds = {};
            var dataCols = {};
            GetDatas();
            GetCol_Datafeilds();
            GetCol_Columns();
            function GetDatas() {
                $.ajax({
                    url: '<%=ResolveUrl("~/Project/Service.aspx/GridValues")%>',
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: false,
                    cache: false,
                    success: function (dataa) {
                        var response = dataa.d;
                        if (response != "Error") {
                            data = response;
                            console.log(data);
                        }
                        else {
                            alert("Retrive Error !!");
                        }
                    },
                    failure: function (data) {
                        alert(response.d);
                    },
                    error: function (error) {
                        console.log("Error : " + error.responseText);

                    }
                });
            }
            function GetCol_Datafeilds() {
                $.ajax({
                    url: '<%=ResolveUrl("~/Project/Service.aspx/Col_Datafeilds")%>',
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: false,
                    cache: false,
                    success: function (dataa) {
                        var response = dataa.d;
                        if (response != "Error") {
                            dataFelds = $.parseJSON(response);
                            console.log(dataFelds);
                        }
                        else {
                            alert("Retrive Error !!");
                        }
                    },
                    failure: function (data) {
                        alert(response.d);
                    },
                    error: function (error) {
                        console.log("Error : " + error.responseText);

                    }
                });
            }
            function GetCol_Columns() {
                $.ajax({
                    url: '<%=ResolveUrl("~/Project/Service.aspx/Col_Columns")%>',
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: false,
                    cache: false,
                    success: function (dataa) {
                        var response = dataa.d;
                        if (response != "Error") {
                            dataCols = $.parseJSON(response);
                            console.log(dataCols);
                        }
                        else {
                            alert("Retrive Error !!");
                        }
                    },
                    failure: function (data) {
                        alert(response.d);
                    },
                    error: function (error) {
                        console.log("Error : " + error.responseText);

                    }
                });
            }
            // prepare the data
            var source =
        {
            datatype: "json",
            datafields: dataFelds,
            updaterow: function (rowid, rowdata, commit) {
                // synchronize with the server - send update command
                // call commit with parameter true if the synchronization with the server is successful 
                // and with parameter false if the synchronization failder.
                commit(true);
            },
            localdata: data
        };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 1000,
                source: dataAdapter,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columnsresize: true,
                columns: dataCols
            });
           // $('#jqxgrid').jqxGrid('pincolumn', 'From_KG');
            //$("#jqxgrid").jqxGrid('enablehover', event.args.checked);
        });

        <%--$("#<%=btn_SelectCells.ClientID%>").click(function () {
            var cells = $('#jqxgrid').jqxGrid('getselectedcells');
            var cellInfo = "";
            for (var i = 0; i < cells.length; i++) {
                var cell = cells[i];
                cellInfo += "\nRow: " + cell.rowindex + ", " + cell.datafield;
            }
            alert(cellInfo);
        });--%>

    </script>
</head>
<body class='default'>
    <form id="form1" runat="server">
        <div>
            <div id='jqxWidget'>
                <div id="jqxgrid">
                </div>
            </div>
            <div style="margin-top: 10px;">

                <input id="button" type="button" value="Get the selected cells" />
                <%--<asp:Button ID="btn_SelectCells" runat="server" Text="Get the selected cells" UseSubmitBehavior="False" />--%>
            </div>


        </div>
    </form>
</body>
</html>

.aspx.cs or Web Service Code ----->>

.aspx.cs或Web服务代码----- >>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Data;
using System.Data.SqlClient;
using System.Collections;
using System.Web.Script.Serialization;
using System.Web.Helpers;
using BL;
using DAL;
using Newtonsoft.Json;
public partial class Project_Service : System.Web.UI.Page
{

    protected void Page_Load(object sender, EventArgs e)
    {

    }

    #region Testing
    [WebMethod]
    public static String GridValues()
    {
        String Qry = "SELECT [From Kgs] as From_Kg,[To kgs] as To_Kg,[1] as Zone1,[2] as Zone2,[3] as Zone3,[4] as Zone4,[5] as Zone5,[6] as Zone6,[7] as Zone7,[8] as Zone8,[9] as Zone9  FROM Tnt_Rate";
        DataTable dt = DbAccess.FetchDatatable(Qry);
        System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
        Dictionary<string, object> row;
        foreach (DataRow dr in dt.Rows)
        {
            row = new Dictionary<string, object>();
            foreach (DataColumn col in dt.Columns)
            {
                row.Add(col.ColumnName, dr[col]);
            }
            rows.Add(row);
        }
        String Val = serializer.Serialize(rows);
        if (Val != "")
        {
            return (Val);
        }
        else
        {
            return "Error";
        }
    }
    [WebMethod]
    public static String Col_Datafeilds()
    {
        String Qry = "SELECT [From Kgs] as From_Kg,[To kgs] as To_Kg,[1] as Zone1,[2] as Zone2,[3] as Zone3,[4] as Zone4,[5] as Zone5,[6] as Zone6,[7] as Zone7,[8] as Zone8,[9] as Zone9  FROM Tnt_Rate";
        DataTable dt = DbAccess.FetchDatatable(Qry);
        System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
        Dictionary<string, object> row = new Dictionary<string, object>();
        String Col = "";
        int counter = 0;
        foreach (DataColumn col in dt.Columns)
        {
            if (counter < 2)
            {
                row = new Dictionary<string, object>();
                row.Add("name", col.ColumnName);
                row.Add("type", "string");
                rows.Add(row);
            }
            else if (counter >= 2)
            {
                row = new Dictionary<string, object>();
                row.Add("name", col.ColumnName);
                row.Add("type", "number");
                rows.Add(row);
            }
            counter += 1;
        }
        Col = serializer.Serialize(rows);
        //Col = JsonConvert.SerializeObject(rows);
        if (Col != "")
        {
            return (Col);
        }
        else
        {
            return "Error";
        }
    }
    [WebMethod]
    public static String Col_Columns()
    {
        String Qry = "SELECT [From Kgs] as From_Kg,[To kgs] as To_Kg,[1] as Zone1,[2] as Zone2,[3] as Zone3,[4] as Zone4,[5] as Zone5,[6] as Zone6,[7] as Zone7,[8] as Zone8,[9] as Zone9  FROM Tnt_Rate";
        DataTable dt = DbAccess.FetchDatatable(Qry);
        System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
        Dictionary<string, object> row;
        String Col = "";
        int counter = 0;
        foreach (DataColumn col in dt.Columns)
        {
            if (counter < 2)
            {
                row = new Dictionary<string, object>();
                row.Add("text", col.ColumnName.ToUpper());
                row.Add("datafield", col.ColumnName);
                row.Add("columntype", "textbox");
                row.Add("width", "100");
                row.Add("cellsalign", "left");
                //row.Add("pinned", "true");
                rows.Add(row);
            }
            else if (counter >= 2)
            {
                row = new Dictionary<string, object>();
                row.Add("text", col.ColumnName.ToUpper());
                row.Add("datafield", col.ColumnName);
                row.Add("columntype", "textbox");
                row.Add("width", "25");
                row.Add("cellsalign", "right");
                rows.Add(row);
            }
        }
        Col = serializer.Serialize(rows);
       // Col = JsonConvert.SerializeObject(rows);
        if (Col != "")
        {
            return (Col);
        }
        else
        {
            return "Error";
        }
    }

    #endregion
}

Paste it ......

粘贴......

Replace the Query by your Query.....

用您的查询替换查询.....

Donot Supply Datafeild and Column Def. in the .aspx page

Donot Supply Datafeild和Column Def。在.aspx页面中

It's Fully Dynamic Solution !!!

这是完全动态的解决方案！

#1