asp.net ajax+jquery(sorttable+pager)实现extjs数据按表头排序和分页效果

先来看看效果,以前一直喜欢的extjs效果,昨天看到了jquery两个插件的效果,做个了demo,感觉很爽:

此demo得注意几个地方,要调用服务器端webservice返回dataTable对象,必须加Microsoft.Web.Preview.dll的应用,这就要装ajax ctf版本了,相信很多有ajax环境的朋友也未必装了这个版本,所以在你的C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Futures January CTP\v1.0.61025就没有Microsoft.Web.Preview.dll这个文件了,这个大家可以在网上ASPAJAXCTP.msi,装上这个就有Microsoft.Web.Preview.dll,在项目中加上这个应用就之后就是配置web.config了,在web.config中与<System.Web>平级的地方加上下面的代码:

 

 1 <!-- 配置dataTable序列化开始 -->
 2      < system.web.extensions >
 3          < scripting >
 4              < webServices >
 5                  < jsonSerialization >
 6                      < converters >
 7                          < add  name ="DataSetConverter"  type ="Microsoft.Web.Preview.Script.Serialization.Converters.DataSetConverter,Microsoft.Web.Preview, Version=1.0.61025.0, Culture=neutral,PublicKeyToken=31bf3856ad364e35" />
 8                          < add  name ="DataRowConverter"  type ="Microsoft.Web.Preview.Script.Serialization.Converters.DataRowConverter,Microsoft.Web.Preview, Version=1.0.61025.0, Culture=neutral,PublicKeyToken=31bf3856ad364e35" />
 9                          < add  name ="DataTableConverter"  type ="Microsoft.Web.Preview.Script.Serialization.Converters.DataTableConverter,Microsoft.Web.Preview, Version=1.0.61025.0, Culture=neutral,PublicKeyToken=31bf3856ad364e35" />
10                      </ converters >
11                  </ jsonSerialization >
12              </ webServices >
13          </ scripting >
14      </ system.web.extensions >
15      <!-- 配置dataTable序列化结束 -->

 

下来就可以写webservice了,就返回20数据的一个方法:

 

 1 //  [ToolboxItem(false)]
 2      //  若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。
 3    [System.Web.Script.Services.ScriptService]
 4      public   class  WebServiceData : System.Web.Services.WebService
 5 ExpandedBlockStart.gifContractedBlock.gif     {
 6
 7        [WebMethod]
 8        public string HelloWorld()
 9ExpandedSubBlockStart.gifContractedSubBlock.gif        {
10            return "Hello World";
11        }

12        //返回20条数据
13        [WebMethod]
14        public DataTable GetDataList()
15ExpandedSubBlockStart.gifContractedSubBlock.gif        {
16            DataTable dtb = new DataTable("dd");
17
18            dtb.Columns.Add(new DataColumn("Name"typeof(string)));
19            dtb.Columns.Add(new DataColumn("Email"typeof(string)));
20            dtb.Columns.Add(new DataColumn("Salary"typeof(int)));
21
22            for (int intLoop = 0; intLoop < 20; intLoop++)
23ExpandedSubBlockStart.gifContractedSubBlock.gif            {
24                DataRow row = dtb.NewRow();
25                row["Name"= string.Format("medal{0}", intLoop);
26                row["Email"= string.Format("medal{0}@126.com", intLoop);
27                row["Salary"= (intLoop + 1* 100;
28                dtb.Rows.Add(row);
29            }

30
31            return dtb;
32        }

33    }

 

你如果用的也是vs2008的话[ToolboxItem(false)]这一行一定要把它干掉,否则客户端会不认识这个webservice的,默认情况是没被干掉的。

 

下来就是一大堆js的应用了,好像没什么说的,就是jquery的插件代码,放个包上来,想研究下的朋友看看

http://files.cnblogs.com/medal/WebServiceTableSort.rar

转载于:https://www.cnblogs.com/medal/archive/2008/07/25/1251646.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过以下步骤在QT中实现QTableWidget的点击表头排序: 1. 在QT Designer中将QTableWidget添加到窗口中。 2. 在代码中为QTableWidget设置表头,并设置表头的单击信号连接到槽函数中。 ```c++ QTableWidget *tableWidget = new QTableWidget(this); tableWidget->setColumnCount(3); tableWidget->setHorizontalHeaderLabels(QStringList() << "Name" << "Age" << "City"); connect(tableWidget->horizontalHeader(), SIGNAL(sectionClicked(int)), this, SLOT(sortTable(int))); ``` 3. 编写槽函数sortTable(),该函数根据点击的表头排序QTableWidget中的数据。 ```c++ void MainWindow::sortTable(int column) { tableWidget->sortByColumn(column); } ``` 4. 运行程序,单击表头即可按照点击的列排序。 完整的代码如下: ```c++ #include <QtWidgets/QMainWindow> #include <QtWidgets/QTableWidget> #include <QtWidgets/QHeaderView> class MainWindow : public QMainWindow { Q_OBJECT public: MainWindow(QWidget *parent = nullptr) : QMainWindow(parent) { QTableWidget *tableWidget = new QTableWidget(this); tableWidget->setColumnCount(3); tableWidget->setHorizontalHeaderLabels(QStringList() << "Name" << "Age" << "City"); connect(tableWidget->horizontalHeader(), SIGNAL(sectionClicked(int)), this, SLOT(sortTable(int))); QStringList names = {"Alice", "Bob", "Charlie", "David", "Eva"}; QStringList ages = {"25", "30", "20", "35", "28"}; QStringList cities = {"New York", "London", "Paris", "Tokyo", "Sydney"}; for (int i = 0; i < 5; i++) { QTableWidgetItem *nameItem = new QTableWidgetItem(names[i]); QTableWidgetItem *ageItem = new QTableWidgetItem(ages[i]); QTableWidgetItem *cityItem = new QTableWidgetItem(cities[i]); tableWidget->setItem(i, 0, nameItem); tableWidget->setItem(i, 1, ageItem); tableWidget->setItem(i, 2, cityItem); } setCentralWidget(tableWidget); } private slots: void sortTable(int column) { tableWidget->sortByColumn(column); } private: QTableWidget *tableWidget; }; int main(int argc, char *argv[]) { QApplication app(argc, argv); MainWindow mainWindow; mainWindow.show(); return app.exec(); } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值