快捷搜索:  as  2018  FtCWSyGV  С˵  test  xxx  Ψһ  w3viyKQx

澳门新葡新京返水在哪里:ASP.NET结合JqGrid完整示例



先容&应用处景

JqGrid不是一个新鲜玩意,已经是一个久澳门新葡新京返水在哪里经证实的开源数据显示控件了。

园子里也有一些先容文章,为什么还要写这篇文章呢?

由于还找不到可以完备讲述JqGrid集成的文章,我指的是从头至尾的完备的讲述,而不是此中一些片段或先容一些参数。

恰恰在看到一篇文章完备的讲述了这个步骤: http://www.codeproject.com/Articles/609442/Using-JqGrid-in-ASP-NET

本文主要参考了这篇文章,讲述jqGrid和ASP.NET集成。

应用处景:

数据多且杂时,假如想要给表格数据的显示增添方便的查询/删选功能。

JqGrid免费,开源,应用方便,是一个不错的选择。

JqGrid的一些阐明

外不雅时髦,功能齐备

JS控件,用来显示和操作表格数据

应用AJAX要领

可以被集成到任何办事器端技巧,例如ASP, JavaServel澳门新葡新京返水在哪里ets, JSP, PHP 等等.

由Trirand公司Tony Tomov开拓.

和ASP.NET集成异常简单

2. 在必要应用的页面中初始化JqGrid.

下面将要将这个table改变成JqGrid.

筹备好我们将要盘算显示在Grid中的字段,我们初始化table的时刻必须带上这些字段。

我们筹备显示的是:

UniqueID

First Name

Last Name

City

State

Address.

3. 绑定命据

现在可以在这个根基上做一些变更了。

你大概会想这个表格有什么分外呢?和一个简单的gridview一样。。。

你点一下第二列的表头"大年夜名"试试,直接就能排序了。

我们给排序写代码了吗?

没错,这便是jqGrid的优雅之处。否则则第一列,每一列的表头都可以进行排序。

除非你加了如下sortable : false属性,如下:

{ name: 'State', index: 'State', width: 80, sortable: false, editable: true }

(这里State这个字段是不能排序的)

继承向下,你能看到其他一些冲感民心的功能 :)

在JqGrid table(jQGridPOC)下面再添加一个div. 如下

table id="jQGridPOC">/table>div id="jQGridPOCPager">/div>

是的,我在底部又添加澳门新葡新京返水在哪里了一个div jQGridPOCPager.

脚本做一些改动,如下

留意方框部分是我新增添的。

看看现在Gri澳门新葡新京返水在哪里d是什么样了.

页码对象栏呈现了。

这个底部对象栏的优雅之处在于,不用写一行代码就能完成搜索功能。

否则则搜索,排序功能也能同样不必要写代码就能实现,JqGrid原生就能实现这些功能。

下面对这个对象栏做一些设置相关设置设置设备摆设摆设如下(如图9,10)。

让我们试一下查找功能. (如图11)

阐明一下,你可以在grid.locale-cn.js-->nav 片段中改动底部对象栏中的一些default设置(显示翰墨,跳出模态框的标题等),如图12.

当然 ,你可以在JqGrid初始化时改动这些默认设定,如图13。

别的你应该留意到了图11中的筛选前提例如即是,不等,开始于等等。

我不必要用这么多的筛选前提,如何移除?

假如已经把grid.locale-cn.js都浏览一遍,你应该已经发明这些前提在grid.locale-cn.js-->search片段中。

是的,只要改动这些就可以了,你可以移除一些碰命运运限。(如下图方框处)

这个文件中的其他片段的感化信托你能根据代码预测出来,自己去探索一下吧 :)

盼望到此处你都能理解。

下一步盘算给grid添加数据库交互功能,即增编削功能。

让我们一路来看看吧。

4.JqGrid Edit/Add/De澳门新葡新京返水在哪里lete

JqGrid所有的事故和属性都是可设置设置设备摆设摆设的,用起来很简单。

不过要留意,纵然是一点小篡改也可能让grid不能按你期望的事情.

为了完成我们的增编削功能,搭建下面代码的框架。留意按照我下面示例的顺序。

$('#jQgridPOC').jqGrid('navGrid', '#jQGridPOCPager',

{edit: true,

add: true,del: true,

search: true,searchtext: "查找",

addtext: "添加",edittext: "编辑",

deltext: "删除",refreshtext:"刷新"

},{

//EDIT EVENTS AND PROPERTIES GOES HERE

},{

//ADD EVENTS AND PROPERTIES GOES HERE},

{//DELETE EVENTS AND PROPERTIES GOES HERE},

{//SEARCH EVENTS AND PROPERTIES GOES HERE

}

);

你可以看到代码中的注释,我将会将事故和属性添补进去。

在第一个大年夜括号里,我们已经添加了一些参数并设定为true, 添加了按钮后面的翰墨阐明。这个部分我上面已经提到过了。

这代表在grid的底部导航栏中,所有的button将会显示,并且分手显示相对应的翰墨。(如下图15)

仅接着的几个大年夜刮号是对应的JqGrid的初始化事故和参数。

让我们看一下grid,上面的篡改都生效了。

您可能还会对下面的文章感兴趣: