玩转jquery插件之flexigrid(二)来点改造如何?
来源:互联网 发布:中国经贸数据网 编辑:程序博客网 时间:2024/06/05 10:28
之前写到:玩转jquery插件之flexigrid(一)如何获取并使用flexigrid?挺受欢迎,后来倒是一直有在从事flexigrid的应用,但的确有些忙,一些整理和保密(一些应用中涉及机密的内容要去掉)工作也感觉会挺繁琐,只好慢慢来吧。
谈到改造,先说一下我们一般都会有哪些比较典型的应用吧,比如在数据上的点击增加点事件,比如加一个筛选记录的操作入口,比如编辑某条记录等等,这些至少是我工作中实实在在的需求。那么在这里,限于篇幅和个人精力,我们做三个方面的改造。
a).增加按钮事件
b).显示某个时间区间内的数据,且可以选择时间区间
c).根据输入的条件筛选数据
对于需求a,我们对按钮事件的期望当然是去完成某项操作,在这里讨论的是和服务端有交互的事件,在flexigrid的一些高级例子中,给出了“增加”和“删除”按钮,但未给出交互示例,其实作者意图也是告诉我们该增加怎样的按钮,按钮放在哪里,按钮该干什么事情等等,都是可以让我们自定义的。如对于“增加”和“删除”按钮事件,我们可以这里来处理:
首先在flexigrid的定义中增加这样的设置,
- buttons :[
- {name:'添加版本',bclass: 'add',onpress : versionMan},
- {name:'删除版本',bclass: 'delete',onpress : versionMan},
- {separator:true}
- ],
表示要给flexigrid增加两个按钮,名为“增加”和“删除”,分别用“add”和“delete”的class来修饰,且都调用了一个名为versionMan的函数,并且按钮直接启用了分隔符。
至于versionMan函数,完全可以自定义要做的事情。如在示例中我这样进行了定义(主要是看看结构,可以根据自己的需求进行更改):
- functionversionMan(com,grid){
- if(com =="添加版本"){
- type ="insert";
- //mask(); 给弹出的div加入遮罩效果
- //_initVal();初始化弹出div的函数调用,这里均可自定义
- $("#edit_versionDiv").css("top",(document.documentElement.scrollTop+260)+"px").show();
- }
- elseif(com =="删除版本"){
- if($('.trSelected',grid).length==0){
- alert("请先选中要删除的版本");returnfalse;
- }
- if(confirm('删除' + $('.trSelected',grid).length + ' 版本?')){
- varversionArr=$(".trSelected td:eq(2) div:first-child",grid);
- varversionStr = new Array();
- for(vari=0;i<versionArr.length;i++){
- versionStr.push($(versionArr[i]).text());
- }
- $.ajax({
- type:"POST",
- url:"del_version.php",
- data:"ids="+versionStr.join(","),
- success:function(msg){
- if(msg=="success"){
- $("#version_man").flexReload({});
- }
- elsealert("有错误发生");
- },
- error:function(msg){
- alert(msg);
- }
- });
- }
- }
- };
上面的示例中需要注意的是:使用ajax方法调用一个php脚本并传入参数,从而执行了需要的操作,php脚本的写法并没有什么不同,就像普通的处理即可,然后$(”#version_man”).flexReload({});这里表示重新调用了flexigrid控件。
除了上面这种通过定义的接口增加按钮和事件的方式,我们还可以采用完全自定义的方式来达到同样的效果,如可以这样来进行:
- functionset_exeBtn(id){
- if($("#"+id).parent().siblings(".pDiv").children(".pDiv2").children("div:last").contents("input").length == 0){
- varstr = '<div class="btnseparator"></div><div class="pGroup" style="float:right"><input type="button" onclick="updateS
- tate(\''+id+'\')" class="button" value="执行" /></div>';
- $("#"+id).parent().siblings(".pDiv").children(".pDiv2").append(str);
- }
- };
- 玩转jquery插件之flexigrid(二)来点改造如何?
- 玩转jquery插件之flexigrid(二)来点改造如何?【补充】
- flexigrid(二)来点改造如何(转)
- 玩转jquery插件之flexigrid(一)如何获取并使用flexigrid?
- 玩转jquery插件之flexigrid
- 玩转jquery插件之flexigrid
- jQuery插件flexigrid改造……
- 深度改造的基于JQuery的Flexigrid插件
- 基于jQuery的FlexiGrid的插件使用和改造
- 基于jQuery的GridView-FlexiGrid的使用和改造(1)--如何使用,完全参数说明
- 基于jQuery的GridView-FlexiGrid的使用和改造(1)--如何使用,完全参数说明
- 基于jQuery的GridView-FlexiGrid的使用和改造(1)--如何使用,完全参数说明
- 基于jQuery的GridView-FlexiGrid的使用和改造(1)--如何使用,完全参数说明
- jquery grid插件 Flexigrid
- 【jQuery插件】flexigrid
- struts2+spring+hibernate+json+jquery+flexigrid开发笔记-flexigrid改造
- JQuery 插件FlexiGrid 之完全配置与使用
- JQUERY插件学习之Flexigrid(类似EXT Gird)
- Ibatis Learning
- Objective-C语法快速参考 [与C#对比]
- Kinect 开发系列之 获取捕捉点图像的横纵坐标并用来做图像剪切
- 引用 CL编译器和LINK编译器的使用方法(复习)
- 【分享】说说标准 —— 揭开外边距折叠(Collapsing margins)的面纱
- 玩转jquery插件之flexigrid(二)来点改造如何?
- OpenGL学习(绘制非凸多边形)
- Poorsquare:找到附近免费商品
- 关于OpenGLES中的glVertexPointer
- download android-4.0 source code
- Oracle Hint
- Asp.net(C#)给图片加上水印效果
- 使用ICU4J探测文档编码
- 玩转jquery插件之flexigrid(二)来点改造如何?【补充】