Showing posts with label jQuery. Show all posts
Showing posts with label jQuery. Show all posts

5/21/2009


jqGrid 3.4.4发布

jqGrid 3.4.4将是3.4版本的最后一次更新,下一次版本将更新为3.5。

更新内容:
1. Fixed bug in setRowData where the id of the row has a value = 0
2. Fixed bug in delRowData where the id of the row has value = 0
3. Fixed bug in Safari when the cell value is empty and we try to edit
it (inline, cell and form edit). The input always has a space instead of empty string
4. Fixed bug in loading message where we have multiple grid in tabs
5. Fixed bug in sorting in case of subGrid and datatype=local
6. To the onSelectAll event is passed array of the grid id’s (previous empty array) when we deselect all ids.
7. Added align property in the pure subGrid. By default all are align left
8. To the onRightClickRow event we pass two additional parameter rowIndex and columnIndex onRightClickRow( id, rowIndex, colIndex)
9. added autoencode parameter - common for all editing modules. Default false.
If set to true all the posted data will be html encoded
10. In form editing is added parameter closeOnEscape, which can be passed
to every action. By default is false. If set to true the modal is closed when Esc key is
pressed.
11. Fixed bug in sortGrid method - passed parameters to sort data function was wrong.
12. Fixed various typos in filterGrid method.
13. Fixed bug in searchGrid method. The evens are passed wrong to the $.isFunction function.
14. Added grid view mode in form edit. The name of the method is viewGridRow
15. Added formoptions object where we can set diffrent parameters to reorder the rows and columns and etc.
16. Fixed bug in subgrid when the json response for the subgrid is empty
17. Fixed bug in treeGrid - ExpandColClick parameter is enabled (again)
18. Added method getFullTreeNode in treeGrid - which return all the children of the given row.
Currently available only in nested set model
19. Fixed bug in getNodeDepth in treeGrid for adjacency model
20. Added option disabled in formatoptions for the checkbox formater.
Default is true. If set to folse the checkboxes are editable when set with the formatter.
21. Added Catalan, Bulgarian(1251) and Japanese Translations
原文链接:http://www.trirand.com/blog/?p=350

2/16/2009


jqGrid 3.4发布

jqGrid 3.4最终版本已于昨天发布了(15/02/2009)。

jqGrid是一个功能强大的,通过JavaScript(Ajax)在网页中以表格的形式来显示数据的jQuery插件。大家可以通过下面的参考链接来更深入的了解jqGrid。

参考链接:

jqGrid官方网站:http://www.trirand.com/blog/
jqGrid文档:http://www.secondpersonplural.ca/jqgriddocs/index.htm
jqGrid演示:http://trirand.com/jqgrid/jqgrid.html
jQuery官方网站:http://jquery.com/

2/11/2009


jqModal实例

jqModal是jQuery一个常见的用来实现自定义弹出窗口的插件。本文将不涉及更详细的技术细节,只会结合一些实例来简单的介绍一下它的使用方法。更多

详细的资料请参看文末的参考链接。

在我们讨论实际的例子之前,首先我们需要知道实现一个jqModal窗口的三个要素:
1.隐藏在普通网页中的jqModal窗口代码
2.jqModal窗口的初始化
3.一个可以触发这个jqModal窗口的trigger

如果只看上面的三点可能太抽象了,下面我们就结合例子看看怎么样利用这三个要素来实现一个jqModal窗口:

1.一个最简单的jqModal实例(jqModal官网中的第一个例子)

首先我们要有一个可以触发jqModal窗口的链接(要素3)。注意这里的class需要定义为"jqModal",这样jqModal就会默认这个链接为新窗口的trigger。
<a href="#" class="jqModal">view</a>

接下来我们就要初始化这个jqModal窗口(要素2)。这里我们只需要一个默认的窗口,所以括号里什么属性都没有设置。我们还可以从这里知道新窗口的id为"dialog"。

<script type="text/javascript">
$().ready(function() {
$('#dialog').jqm();
});
</script>


最后当然就是我们的jqModal窗口了(要素1)。和上面一样,这里的class需要定义为"jqmWindow",
这也是jqModal的默认设置。还要注意的是这里的id也要和上面初始化时的一致。

<div class="jqmWindow" id="dialog">
<a href="#" class="jqmClose">Close</a>
<hr>
弹出窗口的文字...
</div>

注意,jqModal还提供了很多常用的functions,比如这里的class "jqmClose",利用它我们就可以生成一个可以退出新窗口的链接。

2.jqModal最常用的function: jqmShow

上一个例子中我们只是使用了jqModal的默认的行为去生成自己的窗口,但是在实际应用中我们更多的是需要自己主动地去控制。jqModal当然也提供了很多functions,jqmShow就是最常用的一个。顾名思义,这个function是用来主动生成我们自定义的窗口。我们来修改一下上一个例子:

这次我们用button代替原来的链接,这个button和普通的button没有任何区别。(要素3)
<input type="button" id="view" value="view" />

注意这里和上一个例子的区别,当我们点击上面定义的button时就会触发这个新窗口。(要素2)

<script type="text/javascript">
$().ready(function() {
$('#dialog').jqm();
});
$('#view').click(function() {
$('#dialog').jqmShow(); //显示jqModal窗口
});
</script>

其他的部分我们不做修改,所以这里就省略了(参考上面的例子)。

3.jqModal常用参数modal

jqModal除了提供很多functions以外也内置了很多参数。我们需要在初始化的时候对jqModal窗口进行配置。这里我们只对上面的例子做一个很小的修改:

$().ready(function() {
$('#dialog').jqm(modal:true); //设置modal为true,默认为false
});

具体的效果请大家自己做一下实验或者参考一下官网上的资料。

最后还要提醒一下,只要在网站的css中创建自己的class(参考jqModal.css),我们就可以拥有符合自己需要的新窗口了。

参考链接:

jQuery官方网站:http://jquery.com/
jqModal官方网站:http://dev.iceburg.net/jquery/jqModal/