Ext.grid.Panel遠端載入資料分頁，提供新增刪除修改等操作

阿新 • • 發佈：2019-01-01

Ext.grid.Panel遠端載入NorthWind中Customers資料，並提供分頁、新增、刪除、修改和檢視操作，介面如下圖：

Ext.grid.Panel Ajax載入資料

新增介面

修改介面

檢視介面

Extjs程式碼如下：

//Ext.grid.Panel動態載入和讀取相關Customers資訊
Ext.onReady(function ()
{
   
    Ext.QuickTips.init();
    Ext.Loader.setConfig({ enable: true });
    //定義資料模型
    var myModel = Ext.define("Customers", {
        extend: "Ext.data.Model",
        fields: [
            { name: "CustomerID", type: "string" },
            { name: "CompanyName", type: "string" },
            { name: "ContactName", type: "string" },
            { name: "ContactTitle", type: "string" },
            { name: "Address", type: "string" },
            { name: "City", type: "string" },
            { name: "Region", type: "string" },
            { name: "PostalCode", type: "string" },
            { name: "Country", type: "string" },
            { name: "Phone", type: "string" },
            { name: "Fax", type: "string" }
        ]
    });
    //定義一個Ext.data.Store物件
    var customerStore = Ext.create("Ext.data.Store", {
        //指定資料記錄
        model: "Customers",
        //設定分頁大小
        pageSize:15,
        //使用Proxy指定載入遠端資料
        proxy: {
            type: "ajax",
            url: "/AjaxHandler/getCustomersByUSA.ashx",
            reader: {
                type: "json",
                root: "data",
                //獲取資料總數
                totalProperty:"totalCount"
            }
        },
        autoLoad: true
    });
    
    //定義分頁
    var pagebar = Ext.create("Ext.toolbar.Paging", {
        store: customerStore,
        displayInfo: true,
        displayMsg: "顯示{0}-{1}條，共計{2}條",
        emptyMsg: "沒有資料"
    });

    //定義Ext.grid.Panel元件
    var grid = Ext.create("Ext.grid.Panel", {
        title: "Ext.grid.Panel使用Ajax方式載入遠端資料",
        width: "75%",
        height: 450,
        store: customerStore,
        columnLines: true,          //設定列線
        rowLines:true,              //設定行線
        renderTo: Ext.getBody(),
        iconCls:"icon-grid",
        tbar:[{
            xtype: "button",
            frame:true,
            text: "新增",
            scale: "small",
            tooltip: "新增Customers",
            cls: "x-btn-icon",
            //icon: "/ext-4.0.7-gpl/examples/button/images/add.gif",
            icon:"../icons/add.png",
            iconCls:"add",
            handler:AddCustomerFn
        }],
        //分頁功能
        bbar:pagebar,
        //定義grid包含的所有資料列
        columns: [
            { text: "CustomerID", dataIndex: "CustomerID",align:"center" },
            {
                text: "CompanyName", dataIndex: "CompanyName",align:"center",
                editor: { xtype: "textfield", allowPattern: false }
            },
            {
                text: "ContactName", dataIndex: "ContactName", align: "center",
                editor: { xtype: "textfield", allowPattern: false }
            },
            {
                text: "ContactTitle", dataIndex: "ContactTitle", align: "center",
                editor: { xtype: "textfield", allowPattern: false }
            },
            {
                text: "Address", dataIndex: "Address", align: "center",
                editor: { xtype: "textfield", allowPattern: false }
            },
            {
                text: "City", dataIndex: "City", align: "center",
                editor: { xtype: "textfield", allowPattern: false }
            },
            {
                text: "Region", dataIndex: "Region", align: "center",
                editor: { xtype: "textfield", allowPattern: false }
            },
            {
                text: "PostalCode", dataIndex: "PostalCode", align: "center",
                editor: { xtype: "textfield", allowPattern: false }
            },
            {
                text: "Country", dataIndex: "Country", align: "center",
                editor: { xtype: "textfield", allowPattern: false }
            },
            {
                text: "Phone", dataIndex: "Phone", align: "center",
                editor: { xtype: "textfield", allowPattern: false }
            },
            {
                text: "Fax", dataIndex: "Fax", align: "center",
                editor: { xtype: "textfield", allowPattern: false }
            },
            {
                text: "操作", align:"center",html:"<font color=\"red\">操作</font>",
                xtype: "actioncolumn",
                items: [
                    {
                        icon: "/images/edit.gif",
                        tooltip: "編輯",
                        handler: editFn,     //指定單擊”編輯“按鈕的事件處理函式
                        align: "center",
                        width:"100"
                    },
                    {
                        icon: "/images/del.gif",
                        handler: deleteFn,       //指定單擊”刪除“按鈕的事件處理函式
                        tooltip: "刪除",
                        align: "center",
                        width:"100"
                    },
                    {
                        icon: "/images/save.gif",
                        handler: lookFn,     //指定單擊”檢視“按鈕的事件處理函式
                        tooltip: "檢視",
                        width:"100"
                    }
                ]
            }
        ]
    });
    //載入資料
    customerStore.load({ params: { start: 0, limt: 15 } });
    //定義編輯視窗
    var editWin;
    //定義editFn編輯函式
    function editFn(grid,rowIndex,colIndex)
    {
        //獲取當前選中行的資料
        var rec = grid.getStore().getAt(rowIndex);
        
        if (editWin)
        {
            editWin.setTitle("編輯《" + rec.get("CustomerID") + "》");
            //給form元件賦值
            var formFields = editWin.items.get(0).items;
            formFields.get(0).setValue(rec.get("CustomerID"));
            formFields.get(1).setValue(rec.get("CompanyName"));
            formFields.get(2).setValue(rec.get("ContactName"));
            formFields.get(3).setValue(rec.get("ContactTitle"));
            formFields.get(4).setValue(rec.get("Address"));
            formFields.get(5).setValue(rec.get("City"));
            formFields.get(6).setValue(rec.get("Region"));
            formFields.get(7).setValue(rec.get("PostalCode"));
            formFields.get(8).setValue(rec.get("Country"));
            formFields.get(9).setValue(rec.get("Phone"));
            formFields.get(10).setValue(rec.get("Fax"));
        }
        else
        {
            editWin = Ext.create("Ext.window.Window", {
                title: "編輯《" + rec.get("CustomerID") + "》",
                items: [
                    {
                       // url: "/AjaxHandler/UpdateCustomers.ashx",
                        xtype: "form",
                        width: "100%",
                        bodyPadding: 10,
                        items: [
                            {
                                xtype: "textfield",
                                name: "CustomerID",
                                readOnly: true,
                                value: rec.get("CustomerID"),
                                fieldLabel: "CustomerID",
                                id:"CustomerID"
                            },
                            {
                                xtype: "textfield",
                                name: "CompanyName",
                                value: rec.get("CompanyName"),
                                fieldLabel: "CompanyName",
                                id:"CompanyName"
                            },
                            {
                                xtype: "textfield",
                                name: "ContactName",
                                value: rec.get("ContactName"),
                                fieldLabel: "ContactName",
                                id:"ContactName"
                            },
                           
                            {
                                xtype: "textfield",
                                name: "ContactTitle",
                                value: rec.get("ContactTitle"),
                                fieldLabel: "ContactTitle",
                                id:"ContactTitle"
                            },
                            {
                                xtype: "textfield",
                                name: "Address",
                                value: rec.get("Address"),
                                fieldLabel: "Address",
                                id:"Address"
                            },
                            {
                                xtype: "textfield",
                                name: "City",
                                value: rec.get("City"),
                                fieldLabel: "City",
                                id:"City"
                            },
                            {
                                xtype: "textfield",
                                name: "Region",
                                value: rec.get("Region"),
                                fieldLabel: "Region",
                                id:"Region"
                            },
                            {
                                xtype: "textfield",
                                name: "PostalCode",
                                value: rec.get("PostalCode"),
                                fieldLabel: "PostalCode",
                                id:"PostalCode"
                            },
                            {
                                xtype: "textfield",
                                name: "Country",
                                value: rec.get("Country"),
                                fieldLabel: "Country",
                                id:"Country"
                            },
                            {
                                xtype: "textfield",
                                name: "Phone",
                                value: rec.get("Phone"),
                                fieldLabel: "Phone",
                                id:"Phone"
                            },
                            {
                                xtype: "textfield",
                                name: "Fax",
                                value: rec.get("Fax"),
                                fieldLabel: "Fax",
                                id:"Fax"
                            }
                        ]
                    }
                ],
                listeners: {
                    beforedestroy: function (cmp)
                    {
                        this.hide();
                        return false;
                    }
                },
                bbar: [
                    { xtype: "tbfill" },
                    {
                        text: "確定", handler: function ()
                        {
                            //獲取表單，實際返回的是Ext.form.Basci物件
                            var form = editWin.items.get(0).getForm();
                            //獲取表單項的內容，並形成JSON編碼，以便後臺讀取
                            var strparas = Ext.encode(form.getValues());
                            //如果表單輸入校驗通過
                            if (form.isValid())
                            {
                                //以Ajax方式提交表單
                                form.submit({
                                    //修改成功的回撥函式
                                    url: "/AjaxHandler/UpdateCustomers.ashx?jsonstr="+strparas,
                                    clientValidation: true,
                                    //params: strparas,
                                    method:"GET",
                                    success: function (form, action)
                                    {
                                        //處理函式
                                        Ext.Msg.alert("提示", "儲存成功！");
                                        editWin.close();        //關閉或隱藏當前的編輯視窗
                                        //重新載入資料
                                        customerStore.load({ params: { start: 0, limt: 15 } });
                                    }
                                });                              
                            }
                        }
                    },
                    {
                        text: "取消", handler: function ()
                        {
                            editWin.hide();
                        }
                    },
                    { xtype: "tbfill" }
                ]
            });
        }
        editWin.setVisible(true);
    }

    function getJson()
    {
        var CustomerID= Ext.getCmp("CustomerID").getValue();
        var  CompanyName= Ext.getCmp("CompanyName").getValue();
        var  ContactName= Ext.getCmp("ContactName").getValue();
        var  ContactTitle=Ext.getCmp("ContactTitle").getValue();
        var Address=Ext.getCmp("Address").getValue();
        var City= Ext.getCmp("City").getValue();
        var Region=Ext.getCmp("Region").getValue();
        var PostalCode=Ext.getCmp("PostalCode").getValue();
        var Country=Ext.getCmp("Country").getValue();
        var Phone = Ext.getCmp("Phone").getValue();
        var Fax = Ext.getCmp("Fax").getValue();
        var jsonObj = {
            CustomerID: CustomerID,
            CompanyName: CompanyName,
            ContactName: ContactName,
            ContactTitle: ContactTitle
        };
        return jsonObj;
    }

    //定義deleteFn刪除函式
    function deleteFn(grid,rowIndex,colIndex)
    {
        if(Ext.MessageBox.confirm("友情提示","刪除後，資料將不可恢復，請慎重！"))
        {
            var rec = grid.getStore().getAt(rowIndex);
            //Ajax方式傳送請求
            Ext.Ajax.request({
                url: "/AjaxHandler/deleteCustomers.ashx",
                params: {
                    //指定請求的引數
                    id:rec.get("CustomerID")
                },
                //指定伺服器響應完成的回撥函式
                success: function (response)
                {
                    //提示刪除成功，並重新載入grid元件資料
                    var respText = Ext.decode(response.responseText);
                    Ext.Msg.alert("提示", "刪除成功！，伺服器返回為：" + respText);
                    customerStore.load({ params: { start: 0, limt: 15} });

                },
                failure: function (response)
                {
                    var respText = Ext.decode(response.responseText);
                    Ext.Msg.alert("錯誤", respText.error);
                }
               
            });
        }
    }
    //定義lookFn檢視函式
    function lookFn(grid,rowIndex,colIndex)
    {
        var rec = grid.getStore().getAt(rowIndex);
        //建立form表單顯示檢視的資訊
        var lookWin = Ext.create("Ext.window.Window", {
            title: "檢視《" + rec.get("CustomerID") + "》詳細資訊",
            width: 300,
            height: 400,
           // frame: true,
           
            items: [
                {
                    xtype:"form",                
                    bodyPadding:10,
                    items:[
                        {
                            xtype: "textfield",
                            fieldLabel: "CustomerID",
                            readOnly: true,
                            readOnlyCls: "x-form-readonly",
                            value: rec.get("CustomerID")
                        }, {
                            xtype: "textfield",
                            fieldLabel: "CompanyName",
                            readOnly: true,
                            readOnlyCls: "x-form-readonly",
                            value: rec.get("CompanyName")
                        }, {
                            xtype: "textfield",
                            fieldLabel: "ContactName",
                            readOnly: true,
                            readOnlyCls: "x-form-readonly",
                            value: rec.get("ContactName")
                        }, {
                            xtype: "textfield",
                            fieldLabel: "ContactTitle",
                            readOnly: true,
                            readOnlyCls: "x-form-readonly",
                            value: rec.get("ContactTitle")
                        }, {
                            xtype: "textfield",
                            fieldLabel: "Address",
                            readOnly: true,
                            readOnlyCls: "x-form-readonly",
                            value: rec.get("Address")
                        }, {
                            xtype: "textfield",
                            fieldLabel: "City",
                            readOnly: true,
                            readOnlyCls: "x-form-readonly",
                            value: rec.get("City")
                        }, {
                            xtype: "textfield",
                            fieldLabel: "Region",
                            readOnly: true,
                            readOnlyCls: "x-form-readonly",
                            value: rec.get("Region")
                        }, {
                            xtype: "textfield",
                            fieldLabel: "PostalCode",
                            readOnly: true,
                            readOnlyCls: "x-form-readonly",
                            value: rec.get("PostalCode")
                        }, {
                            xtype: "textfield",
                            fieldLabel: "Country",
                            readOnly: true,
                            readOnlyCls: "x-form-readonly",
                            value: rec.get("Country")
                        }, {
                            xtype: "textfield",
                            fieldLabel: "Phone",
                            readOnly: true,
                            readOnlyCls: "x-form-readonly",
                            value: rec.get("Phone")
                        }, {
                            xtype: "textfield",
                            fieldLabel: "Fax",
                            readOnly: true,
                            readOnlyCls: "x-form-readonly",
                            value: rec.get("Fax")
                        }
                    ]
                }
                ]
        });
        lookWin.setVisible(true);
    }
    //
    function AddCustomerFn()
    {
        //建立form表單顯示檢視的資訊

        var addkWin = Ext.create("Ext.window.Window", {
            title: "新建資料",
            width: 300,
            height: 400,
            resizable:false,
            items: [
                {
                    xtype: "form",
                    id: "addform",
                    width: "100%",
                    bodyPadding: 10,
                    items: [
                        {
                            xtype: "textfield",
                            fieldLabel: "CustomerID",
                            allowBlank: false,
                            name:"CustomerID"

                        }, {
                            xtype: "textfield",
                            fieldLabel: "CompanyName",
                            allowBlank: false,
                            name:"CompanyName"

                        }, {
                            xtype: "textfield",
                            fieldLabel: "ContactName",
                            allowBlank: false,
                            name:"ContactName"
                        }, {
                            xtype: "textfield",
                            fieldLabel: "ContactTitle",
                            allowBlank: false,
                            name:"ContactTitle"
                        }, {
                            xtype: "textfield",
                            fieldLabel: "Address",
                            allowBlank: false,
                            name:"Address"
                        }, {
                            xtype: "textfield",
                            fieldLabel: "City",
                            allowBlank: false,
                            name:"City"
                        }, {
                            xtype: "textfield",
                            fieldLabel: "Region",
                            allowBlank: false,
                            name:"Region"
                        }, {
                            xtype: "textfield",
                            fieldLabel: "PostalCode",
                            allowBlank: false,
                            name:"PostalCode"
                        }, {
                            xtype: "textfield",
                            fieldLabel: "Country",
                            allowBlank: false,
                            name:"Country"
                        }, {
                            xtype: "textfield",
                            fieldLabel: "Phone",
                            allowBlank: false,
                            name:"Phone"
                        }, {
                            xtype: "textfield",
                            fieldLabel: "Fax",
                            allowBlank: false,
                            name:"Fax"
                        },
  
                    ]
                }
            ],
            //bbar: [
            //{ xtype: "tbfill" },
            //{
            //    text: "確定", align:"center", handler: function ()
            //    {
            //        debugger;
            //        var cc = addkWin.getComponent("addform");

            //    }
            //},
            //{
            //    text: "取消", handler: function ()
            //    {

            //    }
            //}
            //]
            buttons: [
                {
                    text: "確定", icon: "../icons/accept.png", scale: "small", handler: function ()
                    {
                        //獲取表單
                        //var form = addkWin.getComponent("addform");【此種方式不能條用getForm()方法，但是可以用getValues()方法，鬱悶……】
                        var form = addkWin.items.get(0).getForm();
                        if (form.isValid())
                        {
                            //Ajax方式傳送請求
                            Ext.Ajax.request({
                                url: "/AjaxHandler/addCustomers.ashx",
                                params: {
                                    jsonstr:Ext.encode(form.getValues())
                                },
                                success: function (response)
                                {
                                    Ext.Msg.alert("提示", "新建成功！，伺服器返回值為:" + response.responseText);
                                    //關閉當前的Window元件，返回grid元件介面，並重新載入grid
                                    addkWin.close();
                                    //重新載入資料
                                    customerStore.load({ params: { start: 0, limt: 15 } });
                                },
                                failure: function (response)
                                {
                                    Ext.Msg.alert("提示", "新建失敗！，伺服器返回值為：" + response.responseText);
                                    //關閉當前的Window元件，返回grid元件介面，並重新載入grid
                                    addkWin.close();
                                    //重新載入資料
                                    customerStore.load({ params: { start: 0, limt: 15 } });
                                }
                            });
                        }

                    }
                },
                {
                    text: "取消", icon: "../icons/bullet_cross.png", scale: "small", handler: function ()
                    {
                        //直接關閉當前
                        //關閉當前的Window元件，返回grid元件介面，並重新載入grid
                        addkWin.close();
                        //重新載入資料
                        customerStore.load({ params: { start: 0, limt: 15 } });
                    }
                },
                {
                    text: "重置", icon: "../icons/arrow_redo.png", scale: "small", styel:"margin-rigth:250px;", handler: function ()
                    {
                        //獲取當前的form物件
                        var form = addkWin.items.get(0).getForm();
                        //重置表單中的全部欄位
                        form.reset();
                    }
                }
            ]
        });

        addkWin.setVisible(true);
    }
});

<pre class="csharp" name="code">using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Newtonsoft.Json;

namespace Ext.AjaxHandler
{
    /// <summary>
    /// addCustomers 的摘要說明
    /// </summary>
    public class addCustomers : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            NorthwindEntities db = new NorthwindEntities();
            string json = context.Request["jsonstr"];
            Customers customer = JsonConvert.DeserializeObject<Customers>(json);
            Customers addCustomers = new Customers()
            {
                Address = customer.Address,
                City = customer.City,
                CompanyName = customer.CompanyName,
                ContactName = customer.ContactName,
                ContactTitle = customer.ContactTitle,
                Country = customer.Country,
                CustomerID = customer.CustomerID,
                Fax = customer.Fax,
                Phone = customer.Phone,
                PostalCode = customer.PostalCode,
                Region = customer.Region
            };
            db.Customers.Add(addCustomers);
            int result=db.SaveChanges();
            context.Response.Write("{success:true,data:" + result + "}");
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Text;
using Newtonsoft.Json;

namespace Ext.AjaxHandler
{
    /// <summary>
    /// deleteCustomers 的摘要說明
    /// </summary>
    public class deleteCustomers : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");
            string CustomerID = context.Request["id"];
            NorthwindEntities db = new NorthwindEntities();
            Customers customer= db.Customers.Single<Customers>(c => c.CustomerID == CustomerID);
            //由於Customers表和Orders\OrderDetails有關聯[級聯刪除暫不操作]
            //var orders = from o in db.Orders
            //             where o.CustomerID == CustomerID
            //             select o;
            //foreach(var o in orders)
            //{
            //    var orderdetails = from od in db.Order_Details
            //                       where od.OrderID == o.OrderID
            //                       select od;

            //}

            db.Customers.Remove(customer);
            int result = db.SaveChanges();
            context.Response.Write("{ success:true,result:" + result.ToString() + "}");
            
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Newtonsoft.Json;
using System.IO;
using System.Text;

namespace Ext.AjaxHandler
{
    /// <summary>
    /// UpdateCustomers 的摘要說明
    /// </summary>
    public class UpdateCustomers : IHttpHandler
    {
        //http://www.cnblogs.com/lipan/archive/2011/12/07/2269815.html
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string json = context.Request["jsonstr"];
            int result = 0;
            //將獲取的JSON字串反序列化為Customers物件
            Customers customer = JsonConvert.DeserializeObject<Customers>(json);
            using(NorthwindEntities db = new NorthwindEntities())
            {
                Customers c = db.Customers.FirstOrDefault(cc => cc.CustomerID == customer.CustomerID);
                c.Address = customer.Address;
                c.City = customer.City;
                c.CompanyName = customer.CompanyName;
                c.ContactName = customer.ContactName;

                c.ContactTitle = customer.ContactTitle;
                c.Country = customer.Country;
                c.Fax = customer.Fax;
                c.Phone = customer.Phone;
                c.PostalCode = customer.PostalCode;
                c.Region = customer.Region;
                result= db.SaveChanges();
            }
            context.Response.Write("{success:true,data:" + result + "}");
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Newtonsoft.Json;
using System.Data.SqlClient;
using System.Data;

namespace Ext.AjaxHandler
{
    /// <summary>
    /// getCustomersByUSA 的摘要說明
    /// </summary>
    public class getCustomersByUSA : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/json";
            int start = Convert.ToInt32(context.Request.Params["start"]);   //起始第一頁
            int limit = Convert.ToInt32(context.Request.Params["limit"]);       //每頁顯示的記錄數
            int pageNum = Convert.ToInt32(context.Request.Params["page"].ToString());       //當前頁

            

            string result = string.Empty;        

            #region 傳統的AdoNet方式
            //string Sql = "Select Top " + limit + " * From Customers Where (CustomerID NOT IN(Select Top " + start + " CustomerID From Customers Order By CustomerID)) Order By CustomerID";
            //DataTable dt = SqlHelper.ExecuteDataSet(SqlHelper.con_string, "Customers", CommandType.Text, Sql, null).Tables[0];
            //int totalCount = getTotal();



            //result = "{\"totalCount\":" + totalCount + ",\"data\":" + JsonConvert.SerializeObject(dt) + "}";
            //context.Response.Write(result);
            #endregion

            #region Linq方式
            NorthwindEntities db = new NorthwindEntities();
            
            var totalCount = db.Customers.OrderBy(c => c.CustomerID).Count();
            if ((pageNum-1) * limit < totalCount)
            {
                var query = db.Customers.OrderBy(c => c.CustomerID).Skip((pageNum-1) * limit).Take(limit);

                List<Customers> customerList = new List<Customers>();
                foreach (var item in query)
                {
                    customerList.Add(new Customers()
                    {
                        Address = item.Address,
                        City = item.City,
                        Country = item.Country,
                        CompanyName = item.CompanyName,
                        ContactName = item.ContactName,
                        ContactTitle = item.ContactTitle,
                        CustomerID = item.CustomerID,
                        Fax = item.Fax,
                        Phone = item.Phone,
                        PostalCode = item.PostalCode,
                        Region = item.Region
                    });
                }
                result = "{\"totalCount\":" + totalCount + ",\"data\":" + JsonConvert.SerializeObject(customerList) + "}";
                
            }
            context.Response.Write(result);
            #endregion
            
            
        }
        public int getTotal()
        {
            string Sql = "Select Count(*) As count From Customers";
            DataSet ds = SqlHelper.ExecuteDataSet(SqlHelper.con_string, "Customers", CommandType.Text, Sql, null);
            int total = int.Parse(ds.Tables[0].Rows[0]["count"].ToString());
            return total;
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

Ext.grid.Panel遠端載入資料分頁，提供新增刪除修改等操作

Ext.grid.Panel遠端載入NorthWind中Customers資料，並提供分頁、新增、刪除、修改和檢視操作，介面如下圖： Ext.grid.Panel Ajax載入資料新增介面修改介面檢視介面 Extjs程式碼如下： //Ext.grid.Pan

jquery easyUI ajax載入資料分頁功能

分享一下我老師大神的人工智慧教程吧。零基礎，通俗易懂！風趣幽默！http://www.captainbed.net/ 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

datagrid動態載入資料分頁下載EasyUI外掛

這是完整的前臺程式碼 <!DOCTYPE html> <html> <head id="Head1"> <title>StencilControl</title> <script src="/

JSP實現資料庫表資料分頁顯示並新增模糊匹配查詢

一、JSP實現資料庫表資料分頁顯示大致有兩種方式：取出符合條件的資料，放在資料結構或記憶體中，然後按頁數和每頁顯示的數量進行瀏覽。舉個栗子，假如當前有50條資料，我們需要檢視第二頁，每頁顯示20條資料，則我們需要檢視的是50條資料中第（2 - 1） * 20 + 1 條

Android Demo之旅 ListView底部新增載入更多按鈕實現資料分頁

在我們的實際專案中，資料應該說是很多的，我們的ListView不可能一下子把資料全部載入進來，我們可以當滾動條滾動到ListView的底部的時候，給一個更多的提示，當我們點選它即載入下一頁的資料，相當與我們的分頁效果，參考網上的東西，寫了一個小小的demo，並總結了一些知識

jqgrid載入本地資料分頁

datatype必須是local才能載入本地資料; demo地址: http://download.csdn.net/detail/zhaohuijiadelu/9895196# jQuery("#

EXT資料展示（Ext.grid.Panel）

在網上看到好多關於EXT的例子，但大多數都是用的EXT代理ajax請求的方式，我這裡寫的是把EXT與ajax拆開的。下面為EXT程式碼：var dataSource = ''; var myStore

Ext.grid.Panel 資料動態改變後重新整理grid

gridPanel中載入的資料分為兩種：一種是本地資料載入，那另一種就是後臺資料載入。在表格中增、刪、改、查是必不可少的。那麼資料動態改變後怎樣重新整理表格中的資料呢。一、後臺取資料 var grid = Ext.getCmp('ChannelPriorityRanking'); /

asp.net 中使用EasyUI Datagrid 載入動態資料分頁查詢

剛用了datagrid外掛，記錄備忘。 datagrid官網文件地址：http://www.jeasyui.net/plugins/183.html 效果截圖：功能實現的核心程式碼如下：前臺程式碼：前臺搜尋按鈕： <li><span clas

js靜態資料分頁展示

拿vue做示例首先定義data data() { return { tableData: [], // 當前頁的資料，用於給表格展示用的 tableDataAll: [], // 需要拿來分頁的總資料 pagination: {

ThinkPHP5.1資料分頁輸出

public function test2() { //$data=Pzq_article::all();//獲取所有 //$data=Db::table('pzq_article')->select(); //獲取5條分頁資料 $data=Pzq_article::paginate

Oracle+JSP+Servlet實現的資料分頁展示

前言在做任何事情之前，我們都應該清楚的知道這件事是什麼以及我們為什麼做這件事，分頁也不例外，我們在分頁之前首要要知道什麼是分頁？還要知道為什麼要去進行分頁？我們只有弄清楚了這兩個問題，才能去討論如何實現分頁。首先，說一下什麼是分頁以及為什麼進行分頁(這兩個概念放在一起講最合適)？

oracle 一對多資料分頁查詢篩選

今天專案測試執行的時候，遇到了一個奇怪的問題，這個問題說起來按sql語法的話是沒有錯誤的但是呢按照我們的業務來做區分就有些邏輯上的錯誤了，下面請聽我慢慢道來，在資料庫中有兩個資料，先來看下第一次sql是如何寫的查詢之後在外面做分頁，很正常的邏輯，但是大家都發現了

ASP.NET 簡單實現List資料分頁物件工具類

對於一個List分頁，這個就很簡單了只需要組裝資料結構，然後根據分頁引數改變資料顯示就OK了。 Pager工具 using System; using System.Collections.Generic; using System.Linq; using System.Threadin

SQL Server 資料分頁查詢

最近學習了一下SQL的分頁查詢，總結了以下幾種方法。首先建立了一個表，隨意插入的一些測試資料，表結構和資料如下圖：現在假設我們要做的是每頁5條資料，而現在我們要取第三頁的資料。（資料太少，就每頁5條了）方法一： select top 5 * from [Stu

前端請求後端，後端查詢完畢傳到前端，用layui 將資料分頁

前端：我用的是layui框架的分頁 js 檔案 layui.config({base : "script/" }).use(['form','layer','jquery','laypage'],function(){var form = layui.form(),layer = paren

Mybatis 的SQL篩選 + DataTables 資料分頁顯示

直接上程式碼： Mybatis中的 SQL價格過濾條件--直接在DataTables中生效  <select id="listStatus" resultMap="B

微信小程式雲開發之資料分頁雲函式

微信小程式雲開發之資料分頁雲函式 2018-10-06 20:23:28 微信小程式的雲開發可以自己對資料庫進行操作而不需要後臺，那麼很常見的一

bootstrap table使用：前端分頁，獲取值棧中的json值，載入到table中，獲取選中的行資訊

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ include file="/common/taglibs.jsp" %> <!DOCTYPE html> <html

Ext.grid.panel 改變某一行的字型顏色

grid.getStore().addListener('load', handleGridLoadEvent); function handleGridLoadEvent(store, records) { var gridCount = 0; store.e

Ext.grid.Panel遠端載入資料分頁，提供新增刪除修改等操作

相關推薦