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

2024-01-07

您好,我有绑定到 Gridview 的 DataTable。但需要将其绑定到 jqxgrid 或 jqxdatatable。经过谷歌搜索多次后,我没有找到合适的解决方案。

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

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

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

.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 或 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
}

贴吧……

将查询替换为您的查询......

不要提供数据字段和列定义。在 .aspx 页面中

这是全动态解决方案!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在jqxgrid中的代码后面使用数据表 的相关文章

随机推荐