JQGrid
JQGrid
杨林伟
像火箭科学家一样思考!
展开
-
82jqGrid - 搜索
JSON(格式化后)HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <body> ···代码省略··· <table id="pgrid4"></table> <div id="pp...原创 2019-04-28 14:59:33 · 602 阅读 · 0 评论 -
81jqGrid - 多个汇总值
JSON(格式化后的JSON)HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <body> ···代码省略··· <table id="pgrid4"></table> <div i...原创 2019-04-28 14:56:32 · 408 阅读 · 0 评论 -
80jqGrid - 冻结分组列
JSON(格式化后的json)HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <body> ···代码省略··· <table id="pgrid3"></table> <div i...原创 2019-04-28 14:53:48 · 430 阅读 · 0 评论 -
79jqGrid - 行列总计
JSON(格式化后的JSON)HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <body> ···代码省略··· <table id="pgrid4"></table> <div i...原创 2019-04-28 14:50:54 · 471 阅读 · 0 评论 -
78jqGrid - 列分组
JSON(格式化后)HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <body> ···代码省略··· <table id="pgrid3"></table> <div id="p...原创 2019-04-28 14:47:52 · 431 阅读 · 0 评论 -
77jqGrid - 带有汇总页脚的分组
JSON(格式化后)HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <body> ···代码省略··· <table id="pgrid2"></table> <div id="p...原创 2019-04-28 14:44:09 · 444 阅读 · 0 评论 -
76jqGrid - 分组行
JSON(格式化后)HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <body> ···代码省略··· <table id="pgrid2"></table> <div id="pp...原创 2019-04-28 14:40:48 · 471 阅读 · 0 评论 -
75jqGrid - Basic Pivot Grid
JSON{ "rows" : [ { "CategoryName" : "Beverages", "ProductName" : "Steeleye Stout", "Country" : "UK", "Price" : "1008.0000", "Quantity" : "65" }, { "CategoryName" : "Beverages", "Prod...原创 2019-04-28 14:34:37 · 525 阅读 · 0 评论 -
74jqGrid - 冻结带有分组头的列
这个例子展示了新的冻结列功能。尝试去滚动水平的滚动条。如我们看到了分组表头和行号都是支持的。需要注意的是支持分组表头只是在useColSpanStyle设置为false的时候。HTML代码举例 <head> <title>jqGrid 实例</title> </head> <body> ···代码省略··...原创 2019-04-28 14:30:16 · 561 阅读 · 0 评论 -
73jqGrid - 冻结列
这个例子展示了新的冻结列功能。尝试滚动水平滚动条。HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <body> ···代码省略··· <table id="gfrc1"></table> &...原创 2019-04-28 14:27:14 · 517 阅读 · 0 评论 -
72jqGrid 分组表头 - 有合并列的样式
这个例子展示了一个的分组表头功能:colSpanStyle选项设置为false。HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <body> ···代码省略··· <table id="ghwcs"></t...原创 2019-04-28 14:24:11 · 978 阅读 · 0 评论 -
71jqGrid 分组表头 - 没有合并列的样式
这个例子展示了一个的分组表头功能:colSpanStyle选项设置为false。HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <body> ···代码省略··· <table id="ghcs"></ta...原创 2019-04-28 14:21:03 · 532 阅读 · 0 评论 -
70jqGrid - 一次性加载多级表格数据
在这里只加载一次多级表格的数据,并且显示/隐藏他。没有额外的向服务器请求的ajax。这样做只需要设置一个选项-具体请查看代码。HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <body> ···代码省略··· <ta...原创 2019-04-28 14:12:57 · 1009 阅读 · 0 评论 -
69jqGrid -层级加载时展开所有行
当行被加载时,我们可以自动的展开所有的行。这样做是通过一个参数实现的。具体请查看代码。HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <body> ···代码省略··· <table id="sg2"></...原创 2019-04-28 14:06:36 · 1041 阅读 · 0 评论 -
68jqGrid - 自定义层级图标
我们可以改变多级表格的图标。我们需要改变多级表格的一个选项,他指向这个主题的图标。HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <body> ···代码省略··· <table id="sg1"></ta...原创 2019-04-28 14:03:05 · 716 阅读 · 0 评论 -
67jqGrid - 搜索操作工具栏
这个例子展示了jqGrid一个非常有用的功能-在工具栏上选择一个特定字段进行搜索操作。为此,我们引入了一个新的工具栏搜索参数-searchOperators,当我们设置它为true时,他允许我们在一个特定的字段上选择一个搜索操作。在例子中,很多不同的操作,已经在搜索操作项里面被定义了。选择一个期望的操作,填入一个值,然后点击Enter,它将会被搜索。HTML代码举例<html&...原创 2019-04-28 13:58:21 · 1638 阅读 · 0 评论 -
66jqGrid - 搜索模板
定义搜索模板,使搜索更加容易。HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <body> ···代码省略··· <table id="grps3"></table> <div id="...原创 2019-04-28 13:52:40 · 376 阅读 · 0 评论 -
65jqGrid - 搜索中验证数据
就想版本一样来检查用户输入的数据。这个可以用心属性searchrules来实现。尝试在搜索的ie字段输入非数字的值,然后点击搜索按钮。HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <body> ···代码省略··· &l...原创 2019-04-28 11:52:25 · 360 阅读 · 0 评论 -
64jqGrid - 在搜索中显示查询条件
搜索查询语句可以展示给用户。HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <body style="font-size: 10px;"> ···代码省略··· <table id="grps1"></ta...原创 2019-04-28 11:49:40 · 581 阅读 · 0 评论 -
63jqGrid - 复杂搜索
同时在多重搜索中,如果这个选项是打开的,我们可以使用另一个非常有用的分组搜索选项。用户可以在数据库做出更加复杂的搜索-像这样的查询也是可以的:WHERE (id > 10 OR id < 13) AND name LIKE ‘C%’。HTML代码举例<html> <head> <title>jqGrid 实例</title...原创 2019-04-28 11:46:30 · 449 阅读 · 0 评论 -
62jqGrid - 多级排序
这个例子展示了另一个新功能:multisorting。为此我们引入了一个新的参数:multiSort,当设定次参数之后,就可以指示服务器支持多列排序。如果数据是本地数据,这个选项也是支持的。因此当从服务器上获取数据的时候,sidx参数包含了要排序的字段的顺序。他是一个用逗号分隔的格式化字符串,例如field1 asc,field2 desc…fieldN(字段名 排序类型)。注意最后一个字...原创 2019-04-28 11:38:28 · 887 阅读 · 0 评论 -
61jqGrid - 表单预定义函数
使用预定义的格式化操作,还是比较方便的添加一行,进行编辑。HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <body> ···代码省略··· <table id="frmac"></table> ...原创 2019-04-28 11:35:51 · 327 阅读 · 1 评论 -
60jqGrid - 树模式添加数据
现在树表格与表单编辑完全的兼容。你可以增加,编辑,删除一个节点。如果一行被选中,每一个节点都会作为一个子节点被添加进去。如果一行未被选中,那么添加的是一个跟节点。HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <body> ··...原创 2019-04-28 11:33:27 · 461 阅读 · 0 评论 -
59jqGrid - 列模型模板
当所有的列被创建的时候,我们可以制定一个default 的默认值。在这个例子中展示了所有的字段都是不能被排序的。默认所有的字段都是可以排序的。HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <body> ···代码省略··· ...原创 2019-04-28 11:29:49 · 461 阅读 · 0 评论 -
58jqGrid - 数据合并单元格
在bindKeys新方法的帮助下,我们可以导航这个表格,在表格中定义根据不同的按键定义不同的动作。在这个例子中,选择一行,然后尝试使用向上和向下按键来导航表格的行。当我们点击Enter的时候,一个弹出框就出现了。HTML代码举例<html> <head> <title>jqGrid 实例</title> </head&...原创 2019-04-28 11:26:28 · 448 阅读 · 0 评论 -
57jqGrid - 数据合并单元格
在colModel中使用新的事件cellattr,我们可以轻松的配置数据跨度。需要注意的是我们通过单元格属性,我们可以将任何有效的属性设置到单元格上,包括样式。HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <body> ···代...原创 2019-04-28 11:23:18 · 486 阅读 · 0 评论 -
57jqGrid 分组 - 多分组在头部显示求和(新)
分组可以在远程数据上实现。如果选项groupDataSorted被打开,那么sidx参数将被放到分组列名上。这样,服务器就知道通过第一个分组咧进行排序,并且对列进行排序。HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <body> ...原创 2019-04-28 11:16:07 · 582 阅读 · 1 评论 -
56jqGrid 分组 - 多表头单级数求和(新)
分组可以在远程数据上实现。如果选项groupDataSorted被打开,那么sidx参数将被放到分组列名上。这样,服务器就知道通过第一个分组咧进行排序,并且对列进行排序。HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <body> ...原创 2019-04-28 11:09:41 · 325 阅读 · 0 评论 -
55jqGrid 分组 - 多分组所有级数求和(新)
分组可以在远程数据上实现。如果选项groupDataSorted被打开,那么sidx参数将被放到分组列名上。这样,服务器就知道通过第一个分组咧进行排序,并且对列进行排序。HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <body> ...原创 2019-04-28 11:02:00 · 895 阅读 · 0 评论 -
54jqGrid 分组 - 折叠汇总行
另一个有用的选项被要求了多次。现在我们可以在组头已展开的时候显示统计行。这个是通过设置showSummaryHide选项为true实现的。HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <body> ···代码省略··· ...原创 2019-04-28 10:55:07 · 1014 阅读 · 0 评论 -
53jqGrid 分组 - 动态改变分组
这个例子展示了一些比较有用的方法,入动态的更改分组,删除分组等。HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <body> ···代码省略··· Group By: <select id="chngroup">...原创 2019-04-28 10:51:25 · 663 阅读 · 0 评论 -
52jqGrid 分组 - 远程数据(grandtotals排序)
这个例子类似于之前的一个,但另外我们多了一个方法来接收服务器上的总计行。 通过两个选项实现的。 footerrow:true,userDataOnFooter:true。HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <body> ...原创 2019-04-28 10:46:07 · 368 阅读 · 0 评论 -
51jqGrid 分组 - 远程数据(排序过)
分组还可以在远程数据上实现。如果groupDataSorted选项打开,sidx参数将会在分组列明上被添加上。这样,服务器知道他应该用第一个分组列进行排序,并且对列进行排序。HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <body> ...原创 2019-04-28 10:42:32 · 459 阅读 · 0 评论 -
50jqGrid 分组 - 汇总页脚
这个例子展示了我们有能力在每一个分组的下面,都展示统计信息。appropriate 选项控制着分组下面的分组统计功能。为了实现这一点,我们需要在colModel中添加两个附加属性。summaryType:描述了统计的函数。summaryTpl:数据如何展示到分组统计行上。HTML代码举例<html> <head> <title>jqGr...原创 2019-04-28 10:36:17 · 589 阅读 · 0 评论 -
49jqGrid 分组 - 分组行折叠
groupCollapse选项可以在数据被加载的时候隐藏掉所有的数据,只显示分组的头。在这个例子中,我们设置了分组的排序分降序。HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <body> ···代码省略··· <t...原创 2019-04-28 10:32:39 · 870 阅读 · 0 评论 -
48jqGrid 分组 - RTL支持
语言居左到居右也是支持的。HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <body> ···代码省略··· <table id="list484"></table> <div id=...原创 2019-04-28 10:28:23 · 248 阅读 · 0 评论 -
47jqGrid 分组 - 分组表头行配置
这个例子展示了我们可以改变分组表头的行。这个可以结合groupText选项来实现。其实有这两个模板:{0}这个的意思是分组的文本,{1}这个是在这个分组中有多少项。例子:HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <body> ...原创 2019-04-28 10:17:11 · 749 阅读 · 0 评论 -
46jqGrid 分组 - 隐藏分组列
我们可以告诉表格隐藏掉分组的列。这样做只需要在groupingView对象中的groupColumnShow选项中设置就可以了。注意所有的GroupingView选项都会被动态的改变。例如:HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <...原创 2019-04-28 10:01:55 · 532 阅读 · 0 评论 -
45jqGrid 分组 - 数组数据的简单分组
最简单的分组,就是启用jqGrid的分组功能,并且需要在发生分组上定义一个分组的字段名。当我们本地数据自动分组,那么久没有必要定义附加的排序列了。注意翻页和排序是正常使用的。例如:HTML代码:<html> <head> <title>jqGrid 实例</title> </head> <body&g...原创 2019-04-28 09:59:26 · 418 阅读 · 0 评论 -
44jqGrid 实时数据处理-导航
这个例子展示了导航栏。HTML代码举例<html> <head> <title>jqGrid 实例</title> </head> <body> ···代码省略··· <table id="navgrid"></table> <div id="p...原创 2019-04-24 14:31:22 · 279 阅读 · 0 评论