jquery插件FlexiGrid的使用

jquery插件FlexiGrid的使用

已不推荐下载，如要下载去这个连接下载最新的 
http://gundumw100.iteye.com/blog/545610 

更新于2009-11-30 
先看一下FlexiGrid的参数 
Java代码   收藏代码
  1. height: 200, //flexigrid插件的高度，单位为px  
  2. width: 'auto', //宽度值，auto表示根据每列的宽度自动计算，在IE6下建议设置具体值否则会有问题  
  3. striped: true, //是否显示斑纹效果，默认是奇偶交互的形式  
  4. novstripe: false,//没用过这个属性  
  5. minwidth: 30, //列的最小宽度  
  6. minheight: 80, //列的最小高度  
  7. resizable: false, //resizable table是否可伸缩  
  8. url: false, //ajax url,ajax方式对应的url地址  
  9. method: 'POST', // data sending method,数据发送方式  
  10. dataType: 'json', // type of data loaded,数据加载的类型，xml,json  
  11. errormsg: '发生错误', //错误提升信息  
  12. usepager: false, //是否分页  
  13. nowrap: true, //是否不换行  
  14. page: 1, //current page,默认当前页  
  15. total: 1, //total pages,总页面数  
  16. useRp: true, //use the results per page select box,是否可以动态设置每页显示的结果数  
  17. rp: 25, // results per page,每页默认的结果数  
  18. rpOptions: [10, 15, 20, 25, 40, 100], //可选择设定的每页结果数  
  19. title: false, //是否包含标题  
  20. pagestat: '显示记录从{from}到{to}，总数 {total} 条', //显示当前页和总页面的样式  
  21. procmsg: '正在处理数据，请稍候 ...', //正在处理的提示信息  
  22. query: '', //搜索查询的条件  
  23. qtype: '', //搜索查询的类别  
  24. qop: "Eq", //搜索的操作符  
  25. nomsg: '没有符合条件的记录存在', //无结果的提示信息  
  26. minColToggle: 1, //允许显示的最小列数  
  27. showToggleBtn: true, //是否允许显示隐藏列，该属性有bug设置成false点击头脚本报错。  
  28. hideOnSubmit: true, //是否在回调时显示遮盖  
  29. showTableToggleBtn: false, //是否显示【显示隐藏Grid】的按钮   
  30. autoload: true, //自动加载，即第一次发起ajax请求  
  31. blockOpacity: 0.5, //透明度设置  
  32. onToggleCol: false, //当在行之间转换时，可在此方法中重写默认实现，基本无用  
  33. onChangeSort: false, //当改变排序时，可在此方法中重写默认实现，自行实现客户端排序  
  34. onSuccess: false, //成功后执行  
  35. onSubmit: false, // 调用自定义的计算函数，基本没用          

先下载FlexiGrid api 
[url]http://www.flexigrid.info/ [/url] 
怎么导入就不说了，只要注意路径就没问题 
新建index.jsp文件： 
Html代码   收藏代码
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  7. <title>FlexiGrid</title>  
  8.   
  9. <link rel="stylesheet" href="css/flexigrid/flexigrid.css" type="text/css"></link>  
  10. <script type="text/javascript" src="lib/jquery/jquery.js"></script>  
  11. <script type="text/javascript" src="flexigrid.pack.js"></script>  
  12. <script type="text/javascript">  
  13. $(document).ready(function(){  
  14.     var maiheight = document.documentElement.clientHeight;  
  15.     var w = $("#ptable").width() - 3;  
  16.     var gapTop =  30;  
  17.     var otherpm = 150; //GridHead，toolbar，footer,gridmargin  
  18.     var h = maiheight - gapTop - otherpm;  
  19.   
  20. var grid=$("#flex1").flexigrid({  
  21.         width: w,  
  22.         height: h,  
  23.         url: 'flexGridServlet.do',  
  24.         dataType: 'json',  
  25.         colModel : [  
  26.             //{display: '<input type="checkbox" id="checkAll"/>', name : 'check', width : 50, sortable : false, align: 'center',hide: false},  
  27.             {display: '编号', name : 'id', width : 50, sortable : true, align: 'center',hide: false},  
  28.             {display: '工作名称', name : 'job_name', width : 250, sortable : false, align: 'center'},  
  29.             {display: '工作地址', name : 'work_address', width : 100, sortable : true, align: 'center'},  
  30.             {display: '工资', name : 'salary', width : 60, sortable : true, align: 'right',process:formatMoney},  
  31.             {display: '日期', name : 'date', width : 120, sortable : true, align: 'center'},  
  32.             {display: '语言', name : 'language', width : 80, sortable : true, align: 'center'}                                                                  
  33.             ],  
  34.         buttons : [  
  35.             {name: '添加', bclass: 'add', onpress : toolbar},  
  36.             {name: '删除', bclass: 'delete', onpress : toolbar},  
  37.             {name: '修改', bclass: 'modify', onpress : toolbar},                
  38.             {separator: true}  
  39.             ],  
  40.         searchitems : [  
  41.             {display: '编号', name : 'id', isdefault: true},  
  42.             {display: '工作名称', name : 'job_name'},  
  43.             {display: '工作地址', name : 'work_address'},  
  44.             {display: '语言', name : 'language'}  
  45.             ],  
  46.         errormsg: '发生异常',  
  47.         sortname: "id",  
  48.         sortorder: "desc",  
  49.         usepager: true,  
  50.         title: '信息发布管理',  
  51.         pagestat: '显示记录从{from}到{to}，总数 {total} 条',  
  52.         useRp: true,  
  53.         rp: 10,  
  54.         rpOptions: [10, 15, 20, 30, 40, 100], //可选择设定的每页结果数  
  55.         nomsg: '没有符合条件的记录存在',  
  56.         minColToggle: 1, //允许显示的最小列数  
  57.         showTableToggleBtn: true,  
  58.         autoload: true, //自动加载，即第一次发起ajax请求  
  59.         resizable: false, //table是否可伸缩  
  60.         procmsg: '加载中, 请稍等 ...',  
  61.         hideOnSubmit: true, //是否在回调时显示遮盖  
  62.         blockOpacity: 0.5,//透明度设置  
  63.         rowbinddata: true,  
  64.         showcheckbox: true  
  65.         //gridClass: "bbit-grid"//样式  
  66.     });  
  67.       
  68.     //$('.trSelected',grid).parent().removeClass("trSelected");  
  69.       
  70.     function toolbar(com,grid){  
  71.         if (com=='删除'){  
  72.             ${"action"}.value="delete";  
  73.             if($('.trSelected',grid).length==0){  
  74.                 alert("请选择要删除的数据");  
  75.             }else{  
  76.                 if(confirm('是否删除这 ' + $('.trSelected',grid).length + ' 条记录吗?')){  
  77.                      var  ids ="";  
  78.                      for(var i=0;i<$('.trSelected',grid).length;i++){  
  79.                         ids+=","+$('.trSelected',grid).find("td:first").eq(i).text();//获取id  
  80.                       }  
  81.                       idsids=ids.substring(1);  
  82.                       $.ajax({  
  83.                             type: "POST",  
  84.                             url: "flexGridServlet.do?actionaction="+${"action"}.value,  
  85.                             data: "id="+ids,  
  86.                             dataType:"text",  
  87.                             success: function(msg){  
  88.                                 if(msg=="success"){  
  89.                                     $("#flex1").flexReload();  
  90.                                 }else{  
  91.                                     alert("有错误发生,msg="+msg);  
  92.                                 }  
  93.                             },  
  94.                             error: function(msg){  
  95.                                 alert(msg);  
  96.                             }  
  97.                         });  
  98.                 }  
  99.            }  
  100.         }else if (com=='添加'){  
  101.             ${"action"}.value="add";  
  102.             alert("flexGridServlet.do?actionaction="+${"action"}.value);  
  103.             window.location.href="flexGridServlet.do?action="+${"action"}.value;  
  104.         }else if (com=='修改'){  
  105.             ${"action"}.value="modify";  
  106.             if($(".trSelected").length==1){  
  107.                 alert("flexGridServlet.do?action="+${"action"}.value+"&id="+$('.trSelected',grid).find("td").eq(0).text());  
  108.                 window.location.href="flexGridServlet.do?action="+${"action"}.value+"&id="+$('.trSelected',grid).find("td").eq(0).text();  
  109.                   
  110.             }else if($(".trSelected").length>1){  
  111.                 alert("请选择一个修改,不能同时修改多个");  
  112.             }else if($(".trSelected").length==0){  
  113.                 alert("请选择一个您要修改的记录")  
  114.             }  
  115.                
  116.             //$("#flex1").flexReload({});  
  117.         }  
  118.     }  
  119.     function formatMoney(value, pid) {  
  120.          return "￥" + parseFloat(value).toFixed(2);  
  121.     }  
  122.       
  123.               
  124. });  
  125. </script>  
  126. <style>  
  127.           
  128.    .flexigrid div.fbutton .add  
  129.        {  
  130.            background: url(css/images/add.png) no-repeat center left;  
  131.        }  
  132.   
  133.    .flexigrid div.fbutton .delete  
  134.        {  
  135.            background: url(css/images/close.png) no-repeat center left;  
  136.        }  
  137.    .flexigrid div.fbutton .modify  
  138.        {  
  139.            background: url(css/images/modify.png) no-repeat center left;  
  140.        }  
  141.       
  142. </style>  
  143. </head>  
  144. <body>  
  145. <div id="ptable" style="margin:10px">  
  146.     <table id="flex1" style="display:none"></table>  
  147. </div>    
  148. <input id="action" type="hidden" name="action" value="null" />  
  149. <script>  
  150.           
  151. </script>  
  152.   
  153. </body>  
  154. </html>  

servlet代码： 
Java代码   收藏代码
  1. import java.io.IOException;  
  2. import java.io.PrintWriter;  
  3. import java.sql.SQLException;  
  4. import java.util.*;  
  5.   
  6. import javax.servlet.ServletException;  
  7. import javax.servlet.http.HttpServlet;  
  8. import javax.servlet.http.HttpServletRequest;  
  9. import javax.servlet.http.HttpServletResponse;  
  10.   
  11. public class FlexiGridServlet extends HttpServlet {  
  12.     private DBConnection db;  
  13.   
  14.     public void init() throws ServletException {  
  15.         System.out.println("--------------开始链接---------------------");  
  16.         db = new DBConnection();// 打开链接  
  17.         try {  
  18.             db.getCurrentConnection();  
  19.         } catch (SQLException e1) {  
  20.         }  
  21.         System.out.println("--------------打开链接成功---------------------");  
  22.     }  
  23.   
  24.     public void doGet(HttpServletRequest request, HttpServletResponse response)  
  25.             throws ServletException, IOException {  
  26.   
  27.         // response相关处理  
  28.         response.setContentType("html/txt");  
  29.         response.setCharacterEncoding("utf-8");  
  30.         response.setHeader("Pragma", "no-cache");  
  31.         response.setHeader("Cache-Control", "no-cache, must-revalidate");  
  32.         response.setHeader("Pragma", "no-cache");  
  33.   
  34.         String action = request.getParameter("action");  
  35.         System.out.println("action=" + action);  
  36.         String tableName = "job_info1";  
  37.          if ("add".equals(action)) {  
  38.             System.out.println("--------------------add--------------------");  
  39.             return;  
  40.         } else if ("delete".equals(action)) {  
  41.             System.out.println("--------------------delete------------------");  
  42.             String ids=request.getParameter("id");  
  43.             System.out.println("ids="+ids);  
  44. //          String[] id=ids.split(",");  
  45.             String sql = "delete from "+tableName+" where id in ("+ids+")";  
  46.               
  47.             System.out.println("sql="+sql);  
  48.             try {  
  49.                 db.executeUpdate(sql, null);  
  50.             } catch (Exception e) {  
  51.                 // TODO Auto-generated catch block  
  52.                 e.printStackTrace();  
  53.             }  
  54.             System.out.println("delete success!!!");  
  55.             response.getWriter().write("success");  
  56.             response.getWriter().flush();  
  57.             response.getWriter().close();  
  58.             return;  
  59.         } else if ("modify".equals(action)) {  
  60.             System.out.println("--------------------modify-------------------");  
  61.             return;  
  62.         } else {  
  63.   
  64.         }  
  65.          System.out.println("--------------------下来了-------------------");  
  66.           
  67.         // 获得当前页数  
  68.         String pageIndex = request.getParameter("page");  
  69.         System.out.println("pageIndex=" + pageIndex);  
  70.         // 获得每页数据最大量  
  71.         String pageSize = request.getParameter("rp");  
  72.         System.out.println("pageSize=" + pageSize);  
  73.         // 获得模糊查询文本输入框的值  
  74.         String query = new String(request.getParameter("query").getBytes("ISO8859-1"), "UTF-8");  
  75.                   
  76.         System.out.println("query=" + query);  
  77.         // 获得模糊查询条件  
  78.         String qtype = request.getParameter("qtype");  
  79.         System.out.println("qtype=" + qtype);  
  80.         // 排序的字段  
  81.         String sortname = request.getParameter("sortname");  
  82.         System.out.println("sortname=" + sortname);  
  83.         // desc or asc  
  84.         String sortorder = request.getParameter("sortorder");  
  85.         System.out.println("sortorder=" + sortorder);  
  86.   
  87.         int count = 0;  
  88.         String sql = "";  
  89.         List list = null;  
  90.           
  91.         try {  
  92.             sql = "select count(*) from " + tableName;  
  93.             if (!query.equals("")) {  
  94.                 sql += " where " + qtype + "='" + query + "'";  
  95.             }  
  96.             System.out.println("sql=" + sql);  
  97.             count = db.executeQuery(sql);  
  98.             System.out.println("count=" + count);  
  99.   
  100.             sql = "select * from " + tableName;  
  101.             if (!query.equals("")) {  
  102.                 sql += " where " + qtype + "='" + query + "'";  
  103.             }  
  104.             sql += " order by " + sortname + " " + sortorder;  
  105.             sql += " limit "  
  106.                     + ((Integer.parseInt(pageIndex) - 1) * Integer  
  107.                             .parseInt(pageSize)) + "," + pageSize;  
  108.             System.out.println("sql=" + sql);  
  109.             list = db.executeQueryList(sql);  
  110.             System.out.println("list.size=" + list.size());  
  111.             if (list == null) {  
  112.                 System.out.println("======出错啦======");  
  113.                 return;  
  114.             }  
  115.         } catch (Exception e) {  
  116.             // TODO Auto-generated catch block  
  117.             e.printStackTrace();  
  118.         }  
  119.   
  120.         Map map = new HashMap();  
  121.         map.put("page", pageIndex);  
  122.         map.put("total", count + "");  
  123.         // 数据JSON格式化  
  124.         String json = toJSON(list, map);  
  125.   
  126.         response.getWriter().write(json);  
  127.         response.getWriter().flush();  
  128.         response.getWriter().close();  
  129.   
  130.     }  
  131.   
  132.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
  133.             throws ServletException, IOException {  
  134.         doGet(request, response);  
  135.     }  
  136.   
  137.     public void destroy() {  
  138.         System.out.println("--------------关闭链接---------------------");  
  139.         db.closeCurrentConnection();  
  140.     }  
  141.   
  142.     /** 
  143.      * 数据JSON格式化 
  144.      *  
  145.      * @param list 
  146.      * @param pageInfo 
  147.      * @return 
  148.      */  
  149.     private String toJSON(List list, Map map) {  
  150.         List mapList = new ArrayList();  
  151.         for (int i = 0; i < list.size(); i++) {  
  152.             Map cellMap = new HashMap();  
  153.             cellMap.put("id", ((Map) list.get(i)).get("id").toString());  
  154.             cellMap.put("cell", new Object[] {   
  155.                     //"<input type='checkbox'/>",  
  156.                     ((Map) list.get(i)).get("id"),  
  157.                     ((Map) list.get(i)).get("job_name"),  
  158.                     ((Map) list.get(i)).get("work_address"),  
  159.                     ((Map) list.get(i)).get("salary"),  
  160.                     ((Map) list.get(i)).get("date"),  
  161.                     ((Map) list.get(i)).get("language") });  
  162.             mapList.add(cellMap);  
  163.         }  
  164.         map.put("rows", mapList);  
  165.         JSONObject object = new JSONObject(map);  
  166.         return object.toString();  
  167.     }  
  168.   
  169. }  

web.xml配置： 
Xml代码   收藏代码
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <web-app version="2.4"   
  3.     xmlns="http://java.sun.com/xml/ns/j2ee"   
  4.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   
  5.     xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee   
  6.     http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">  
  7.   <servlet>  
  8.     <servlet-name>flexGridServlet</servlet-name>  
  9.     <servlet-class>FlexiGridServlet</servlet-class>  
  10.   </servlet>  
  11.   <servlet-mapping>  
  12.     <servlet-name>flexGridServlet</servlet-name>  
  13.     <url-pattern>/flexGridServlet.do</url-pattern>  
  14.   </servlet-mapping>  
  15.     
  16.   <welcome-file-list>  
  17.     <welcome-file>index.jsp</welcome-file>  
  18.   </welcome-file-list>  
  19. </web-app>  


主要步骤就上面那些，其他还有个数据库操作类&JSON操作类， 
例外数据库文件我也生成好了，怎么使用我不用说了吧。 
我把工程全部放上来，该工程绝对可以跑。 

你可能感兴趣的:(flexigrid)

  • 如何编写可维护的JavaScript代码 weixin_34320159
    摘自：http://my.oschina.net/feichexia/blog/122217JavaScript这门编程语言发展至今已经非常流行了，各种名词也层出不穷，我们随便列举下就有一大堆，比如Node.js、jQuery、JavaScriptMVC、Backbone.js、AMD、CommonJS、RequireJS、CoffeScript、Flexigrid、Highchart、Scrip
  • flexigrid参数说明 xiaoweidongdong flexigrid
    flexigrid参数说明:height:200,//flexigrid插件的高度，单位为pxwidth:'auto',//宽度值，auto表示根据每列的宽度自动计算，在IE6下建议设置具体值否则会有问题striped:true,//是否显示斑纹效果，默认是奇偶交互的形式novstripe:false,//没用过这个属性minwidth:30,//列的最小宽度minheight:80,//列的最小
  • FlexiGrid使用教程 weixin_30615767
    一．表的结构1表结构varFriendLink={tableName:'FriendLink',--表名title:'友情链接',--显示在Grid最上面的中文dialogtitle:'',--弹出对话框的标题columns:[{--表数据结构display:'友链类型',--字段中文名称name:'TypeID',--数据库中的字段名称width:100,--在Grid上的宽度sortable:
  • Flexigrid仅选一行设置、获取行ID、取Cell文本 wallimn JAVAWEB开发
    1、Flexigrid默认是可以选择多行，那么如何设置其只能选一行呢？今天看了看Flexigrid的源码，发现有个属性可以控制：$(this).click(function(e){varobj=(e.target||e.srcElement);if(obj.href||obj.type)returntrue;$(this).toggleClass('trSelected');if(p.single
  • flexigrid教程（一）-jquery最好的grid插件 hjwang1 web前端
    转自：http://hi.baidu.com/fengkuang031/blog/item/f030284ded6a123cafc3ab98.html有用过ext的Grid或flex的DataGrid的朋友，应该对gird组件有比较好的理解。grid是强大的表格数据表现形式，是对表格的全面强化。flexigrid从名字来看更接近flex，但实际上应该模仿的是ext的Grid组件。虽然是模仿，但有很
  • 基于jQuery的FlexiGrid的插件使用和改造 gundumw100 jQuerySQLjson正则表达式Ajax
    已不推荐下载，如要下载去这个连接下载最新的http://gundumw100.iteye.com/admin/blogs/545610http://www.cnblogs.com/xuanye/archive/2009/11/04/Xuanye_jQuery_FlexiGrid.htmlhttp://www.cnblogs.com/xuanye/archive/2009/11/08/Xuanye_
  • 玩转jquery插件之flexigrid（二）来点改造如何？【补充】 小博 jquery
    然后在flexigrid初始化参数中设置：onSuccess:function(){set_exeBtn(”gridtable”);}，这表示flexigrid加载完成后执行set_exeBtn函数，该函数向flexigrid的右下角加入了一个名为“执行”的按钮，并且为该按钮定义了事件updateState，该事件的定义如下：functionupdateState(id){//最后$("#"+id
  • Flexigrid系列使用教程（二）JSON数据生成代码 Mchange 前端
    Flexigrid系列使用教程（二）JSON数据生成代码摘要：上一篇简单的介绍了一下前台页面代码部分，本文主要说一下如何为flexigrid提供前台数据，主要提供了将后台数据库里面的数据转换成Json格式后交由前台显示。前台页面中调用后台的代码是这样的：/BDeviceApply/GetSysSdandeviceFlex，这是在.NETMVC框架的调用方式，本人接触.net开发时间不长，所以对这点
  • Flexigrid系列使用教程（一）前台代码及参数说明 windxxf C#.netjquery插件stringxmlhttprequestfunctionjqueryajax
    摘自：http://www.kwstu.com/Article/ShowArticle.asp?ArticleID=259本教程从零开始介绍Flexigrid的使用方法，记录了作者学习中的点点滴滴，实例主要是在.netmvc框架下实现的，废话不多说了，先看一下Flexigrid的效果图吧。一、首先简单介绍一下flexigrid：1、主要特性：Flexigrid是Jquery家族中table类或gr
  • jQuery插件flexigrid改造…… guofengcn
    做毕设用到flexigrid这个插件，但是遇到种种问题！呃，说不太明白，还是用代码说话吧！后台代码：privateList《RlEmployee》rows;这个就是要在前台显示的rows。但是问题是我的RlEmployee是这样的：privateIntegerempId;privateRlDepartmentrlDepartment;privateRlPositionrlPosition;priv
  • flexigrid 添加行选择事件 在意一下
    分享一下我老师大神的人工智能教程。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow假定我有一个htmltable元素，与之对应的有一个flexigrid，同时该flexigird支持单选，禁用多选。现在要添加一个事件函数，使得当点击任一行的时候会被调用。加入我的table元素的id是subUsers，
  • 【华磊随笔】善于使用工具（1）-使用IE8开发人员工具和FireBug分析Jquery FlexiGrid的实现原理... weixin_30823227
    【华磊随笔】善于使用工具（1）-使用IE8开发人员工具和FireBug分析JqueryFlexiGrid的实现原理"工欲善其事,必先利其器"当今Web开发，如何有效的提升用户操作体验已经越来越重要，以现在的技术而言，Javascript操作dom和style是最有效的手段；Web开发不像Windows开发一样，往往要涉及到很多不同的技术和方向；同时，由于机制的原因和技术的分散，快速有效方便的调试J
  • jquery grid插件 Flexigrid + servlet cxhzqhzq flexjquerystylesheetjsonservletdeleteweb框架
    2008-09-02关键字:ajaxjquery分页flexigrid前些日子写了个源于jquerygrid插件Flexigrid算不上例子的一片文章。为了能更快的使用这个东东。。今天做了一个相对比较详细的例子.对一个工作信息表操控的例子。第一步：创建数据库Sql代码/*MySQLDataTransferSourceHost:localhostSourceDatabase:spiderdataTa
  • flexgrid jzy23682891 Ajaxjavascript
    第一个Grid示例$(document).ready(function(){$('.flexme1').flexigrid({height:'auto',//高度striped:true,//分割线width:900,//宽度title:'客户管理',//标题buttons:[{name:'新增客户',bclass:'add'},{name:'删除客户',bclass:'delete'},{sep
  • jqGrid表格插件学习（一） 第一个Demo 新发现FLY javascript
    jqGrid学习最近的工作任务频繁涉及到很多的jqGrid这个插件，鉴于刚接触这个东西时不太了解，以至于在这个上面耽误了一些时间，现在将jqGrid学习总结一下：应用中经常会遇到向用户展示信息的情况。我们可以自己通过标签来实现。在此介绍另一种方法：通过jQuery的插件来实现信息的展示以及对数据的操作等功能。在网上，关于jQuery的表格插件有不少。其中有几款做的很好，比如：flexiGrid和j
  • jQuery学习之：jqGrid表格插件——第一个Demo polaris1119 jQuery
    应用中经常会遇到向用户展示信息的情况。我们可以自己通过标签来实现。在此介绍另一种方法：通过jQuery的插件来实现信息的展示以及对数据的操作等功能。在网上，关于jQuery的表格插件有不少。其中有几款做的很好，比如：flexiGrid和jqGrid。不过flexGrid网上的资料很少，官方文档不全。而jqGrid的官方文档却相当的全面。官方文档网址：http://www.trirand.com/j
  • 使用FlexiGrid实现Extjs表格效果方法分享
    近一段时间Extjs真的是风光无限好，只要是个做CRM/HRM之类的企业现在都在琢磨怎么在项目中用它，不过兄弟我可是不敢，原因很简单：太大/太笨/源码不好调试。但是对于Extjs漂亮的表格与功能的强大，实在是让我垂涎三尺，记得以前有个老外同志写过一个类似的Extjs的Jquery插件，所以就在Jquery的插件海洋中一顿海找，呵呵，还真让我找到了。看来还是我的Jquery好，小巧简单好像一部好的汽
  • flexigrid实际使用总结 跨时代135 JQuery
    1、隐藏某一列。Flexigrid——colModel:属性名类型描述displaystring显示的列名namestring绑定的列名sortablebool是否可以排序alignstring对其方式widthint列的宽度hidebool是否隐藏该列pkbool是否为主键标识、如果是则隐藏该列，值存入隐藏域中processfunctioncustomValuefunction自定义显示值。(如
  • flexigrid 参数说明 11Yision
    项目用到这玩意，像样的API都是英文的，英文不好，所以经过各种搜集，flexigrid就整理了这么多用得上的东西，用不上的没有整理进来。flexigrid参数说明:height:200,//flexigrid插件的高度，单位为pxwidth:'auto',//宽度值，auto表示根据每列的宽度自动计算，在IE6下建议设置具体值否则会有问题striped:true,//是否显示斑纹效果，默认是奇偶交
  • jQuery插件简单学习实例教程 sust2012
    本文实例讲述了jQuery插件及其用法。分享给大家供大家参考，具体如下：（1）异步分页插件flexgrid1）前台jsInserttitlehere$(document).ready(function(){$("#flexigridTable").flexigrid({url:'flexigridAction.html',//请求数据的路径method:'POST',//请求方式dataType:
  • 使用jQuery插件flexigrid搭建项目框架 u010235716 js
     今天来了，不能懒，该写就写；1.既然是要用jQuery的JS。那就要放入项目中2.使用方式jsp+js:3.调用后台$(function(){ $("#flexgrid").flexigrid({ url:webroot+'sand/messageCodeImportAction!getPagedCityList.action', dataType:'json', colModel:[{ dis
  • 【jquery】flexiGrid新增功能的方式 沈金强
    到目前为止，我用过的jquery表格插件只有jqGrid和flexiGrid。今天，只说后者。关于参数配置，使用方法，博客园文章很多。原生的flexiGrid架包不大，内容可以扩展，比如在每行数据列前增加一个checkBox用于选择，再比如原生flexiGrid中支持json和xml格式传递数据。而flexiGrid中json格式的数据则必须写为{id:"",rows：[{"id1","name1
  • flexigrid 参数说明 卫道士
    本文为转载http://simple1024.iteye.com/blog/1171090  项目用到这玩意，像样的API都是英文的，英文不好，所以经过各种搜集，flexigrid就整理了这么多用得上的东西，用不上的没有整理进来。 flexigrid参数说明:   height:200,//flexigrid插件的高度，单位为px   width:'auto',//宽度值，auto表示根据每列的宽
  • jQuery 表格工具集 jquery
    本文搜集了大量 jQuery 表格插件，帮助 Web 设计者更好地驾御 HTML 表格，你可以对表格进行横向和竖向排序，设置固定表头，对表格进行搜索，对大表格进行分页，对表格进行滚动，拖放操作等等。这些插件很多都包含详细的教 程。 jQuery 表格插件 Flexigrid – Web 2.0 Javscript Grid for jQuery - 可变列宽，自动适应表头宽度，可通过 Aja
  • JQuery FlexiGrid的asp.net完美解决方案-dotNetFlexGrid使用指南(二）服务端查询、快速查询和Html模板 flexigrid
    开始之前，看下最新的v1.2版本有些什么 修复快速查询时的键盘回车事件与控件外围事件的冲突的问题。 修复快速查询时设置正则表达式时可能导致的语法错误的问题。 数据提供方法 DataHandler 将不再强制要求与列的绑定顺序一致，现在通过返回的 DataTable 中的 ColumnName 自动绑定到合适的列，所以，请保证您的 DataTa
  • dotNetFlexGrid-asp.net的异步表格控件 asp.net
    dotNetFlexGrid-asp.net的异步表格控件 使用指南 1.简介 JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid是一款asp.net原生的异步表格控件，它的前身是Jquery FlexiGrid插件，我们重构了FlexiGrid的大部分Javascript代码，使其工作的更有效率，BUG更少；同时将其封装为asp.net 控件，提供了简单易
  • Flexigrid去掉列选择 flexigrid
    Flexigrid中会出现列选择的小黑箭头，有时挺讨厌，想去掉。发现没有控制的地方，于是自己加。 在flexigrid.js中增加 在定义中增加   p = $.extend({ //apply default properties height: 200, //default height width: 'auto', //auto width st
  • Flexigrid折行显示问题 flexigrid
    上会写的Flexigrid折行显示时，获取值有问题，报错。   getRows: function(){ //add by jej var rtnList = new Array(); var objRows = $('.trSelected', $(t)); if(objRows!=null){ for(var i=0;i<
  • Flexigrid的编辑功能 flexigrid
    editCells:function(){ if(!isEditing){ isEditing = true; $('tbody tr',$(t)).each(function () { for(var i=0;i<this.cells.length;i++){ var td = this.cells[i];
  • asp.net mvc flexigrid应用实例 flexigrid
    本节主要讲解下jquery下的felxigrid在asp.net mvc下的应用  经过测试 在IE下有点小问题，但是在ff下没问题，报在IE下不支持$.outerwidth此属性，百度了很久不知道有什么替代属性，暂且先放一下这个问题，希望高手求解。 先看下效果图吧： IE下报错的语句图，火狐没问题，希望高手求解： 项目结构图： 下面我简单的讲解下实现思路： 1、创
  • 多线程编程之存钱与取钱 周凡杨 javathread多线程存钱取钱
      生活费问题是这样的：学生每月都需要生活费，家长一次预存一段时间的生活费，家长和学生使用统一的一个帐号，在学生每次取帐号中一部分钱，直到帐号中没钱时 通知家长存钱，而家长看到帐户还有钱则不存钱，直到帐户没钱时才存钱。   问题分析：首先问题中有三个实体，学生、家长、银行账户，所以设计程序时就要设计三个类。其中银行账户只有一个，学生和家长操作的是同一个银行账户，学生的行为是
  • java中数组与List相互转换的方法 征客丶 JavaScriptjavajsonp
    1.List转换成为数组。（这里的List是实体是ArrayList) 　　调用ArrayList的toArray方法。 　　toArray 　　public T[] toArray(T[] a)返回一个按照正确的顺序包含此列表中所有元素的数组；返回数组的运行时类型就是指定数组的运行时类型。如果列表能放入指定的数组，则返回放入此列表元素的数组。否则，将根据指定数组的运行时类型和此列表的大小分
  • Shell 流程控制 daizj 流程控制if elsewhilecaseshell
    Shell 流程控制 和Java、PHP等语言不一样，sh的流程控制不可为空，如(以下为PHP流程控制写法)： <?php if(isset($_GET["q"])){ search(q);}else{// 不做任何事情} 在sh/bash里可不能这么写，如果else分支没有语句执行，就不要写这个else，就像这样 if else if if 语句语
  • Linux服务器新手操作之二 周凡杨 Linux 简单 操作
    1.利用关键字搜寻Man Pages    man -k keyword  其中-k 是选项，keyword是要搜寻的关键字 如果现在想使用whoami命令，但是只记住了前3个字符who，就可以使用 man -k who来搜寻关键字who的man命令       [haself@HA5-DZ26 ~]$ man -k
  • socket聊天室之服务器搭建 朱辉辉33 socket
    因为我们做的是聊天室，所以会有多个客户端，每个客户端我们用一个线程去实现，通过搭建一个服务器来实现从每个客户端来读取信息和发送信息。    我们先写客户端的线程。 public class ChatSocket extends Thread{ Socket socket; public ChatSocket(Socket socket){ this.sock
  • 利用finereport建设保险公司决策分析系统的思路和方法 老A不折腾 finereport金融保险分析系统报表系统项目开发
    决策分析系统呈现的是数据页面，也就是俗称的报表，报表与报表间、数据与数据间都按照一定的逻辑设定，是业务人员查看、分析数据的平台，更是辅助领导们运营决策的平台。底层数据决定上层分析，所以建设决策分析系统一般包括数据层处理（数据仓库建设）。   项目背景介绍 通常，保险公司信息化程度很高，基本上都有业务处理系统（像集团业务处理系统、老业务处理系统、个人代理人系统等）、数据服务系统（通过
  • 始终要页面在ifream的最顶层 林鹤霄
    index.jsp中有ifream，但是session消失后要让login.jsp始终显示到ifream的最顶层。。。始终没搞定，后来反复琢磨之后，得到了解决办法，在这儿给大家分享下。。 index.jsp--->主要是加了颜色的那一句 <html> <iframe name="top" ></iframe> <ifram
  • MySQL binlog恢复数据 aigo mysql
    1，先确保my.ini已经配置了binlog：   # binlog log_bin = D:/mysql-5.6.21-winx64/log/binlog/mysql-bin.log log_bin_index = D:/mysql-5.6.21-winx64/log/binlog/mysql-bin.index log_error = D:/mysql-5.6.21-win
  • OCX打成CBA包并实现自动安装与自动升级 alxw4616 ocxcab
    近来手上有个项目,需要使用ocx控件 (ocx是什么? http://baike.baidu.com/view/393671.htm) 在生产过程中我遇到了如下问题. 1. 如何让 ocx 自动安装?     a) 如何签名?     b) 如何打包?     c) 如何安装到指定目录? 2.
  • Hashmap队列和PriorityQueue队列的应用 百合不是茶 Hashmap队列PriorityQueue队列
      HashMap队列已经是学过了的,但是最近在用的时候不是很熟悉,刚刚重新看以一次,   HashMap是K,v键 ,值     put()添加元素      //下面试HashMap去掉重复的 package com.hashMapandPriorityQueue; import java.util.H
  • JDK1.5 returnvalue实例 bijian1013 javathreadjava多线程returnvalue
    Callable接口： 返回结果并且可能抛出异常的任务。实现者定义了一个不带任何参数的叫做 call 的方法。 Callable 接口类似于 Runnable，两者都是为那些其实例可能被另一个线程执行的类设计的。但是 Runnable 不会返回结果，并且无法抛出经过检查的异常。        ExecutorService接口方
  • angularjs指令中动态编译的方法(适用于有异步请求的情况) 内嵌指令无效 bijian1013 JavaScriptAngularJS
            在directive的link中有一个$http请求，当请求完成后根据返回的值动态做element.append('......');这个操作，能显示没问题，可问题是我动态组的HTML里面有ng-click，发现显示出来的内容根本不执行ng-click绑定的方法！     
  • 【Java范型二】Java范型详解之extend限定范型参数的类型 bit1129 extend
    在第一篇中，定义范型类时，使用如下的方式：   public class Generics<M, S, N> { //M,S,N是范型参数 }  这种方式定义的范型类有两个基本的问题：   1. 范型参数定义的实例字段，如private M m = null;由于M的类型在运行时才能确定，那么我们在类的方法中，无法使用m，这跟定义pri
  • 【HBase十三】HBase知识点总结 bit1129 hbase
    1. 数据从MemStore flush到磁盘的触发条件有哪些？    a.显式调用flush，比如flush 'mytable'    b.MemStore中的数据容量超过flush的指定容量，hbase.hregion.memstore.flush.size,默认值是64M 2. Region的构成是怎么样？ 1个Region由若干个Store组成
  • 服务器被DDOS攻击防御的SHELL脚本 ronin47
    mkdir /root/bin vi /root/bin/dropip.sh #!/bin/bash/bin/netstat -na|grep ESTABLISHED|awk ‘{print $5}’|awk -F:‘{print $1}’|sort|uniq -c|sort -rn|head -10|grep -v -E ’192.168|127.0′|awk ‘{if($2!=null&a
  • java程序员生存手册-craps 游戏-一个简单的游戏 bylijinnan java
    import java.util.Random; public class CrapsGame { /** * *一个简单的赌*博游戏，游戏规则如下： *玩家掷两个骰子，点数为1到6，如果第一次点数和为7或11，则玩家胜， *如果点数和为2、3或12，则玩家输， *如果和为其它点数，则记录第一次的点数和，然后继续掷骰，直至点数和等于第一次掷出的点
  • TOMCAT启动提示NB: JAVA_HOME should point to a JDK not a JRE解决 开窍的石头 JAVA_HOME
    当tomcat是解压的时候，用eclipse启动正常，点击startup.bat的时候启动报错; 报错如下：   The JAVA_HOME environment variable is not defined correctly This environment variable is needed to run this program NB: JAVA_HOME shou
  • [操作系统内核]操作系统与互联网 comsci 操作系统
         我首先申明：我这里所说的问题并不是针对哪个厂商的，仅仅是描述我对操作系统技术的一些看法       操作系统是一种与硬件层关系非常密切的系统软件，按理说，这种系统软件应该是由设计CPU和硬件板卡的厂商开发的，和软件公司没有直接的关系，也就是说，操作系统应该由做硬件的厂商来设计和开发
  • 富文本框ckeditor_4.4.7 文本框的简单使用 支持IE11 cuityang 富文本框
    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>知识库内容编辑</tit
  • Property null not found darrenzhu datagridFlexAdvancedpropery null
    When you got error message like "Property null not found ***", try to fix it by the following way: 1)if you are using AdvancedDatagrid, make sure you only update the data in the data prov
  • MySQl数据库字符串替换函数使用 dcj3sjt126com mysql函数替换
    需求：需要将数据表中一个字段的值里面的所有的  .   替换成  _   原来的数据是  site.title  site.keywords  .... 替换后要为     site_title  site_keywords   使用的SQL语句如下：   updat
  • mac上终端起动MySQL的方法 dcj3sjt126com mysqlmac
    首先去官网下载: http://www.mysql.com/downloads/ 我下载了5.6.11的dmg然后安装,安装完成之后..如果要用终端去玩SQL.那么一开始要输入很长的:/usr/local/mysql/bin/mysql 这不方便啊,好想像windows下的cmd里面一样输入mysql -uroot -p1这样...上网查了下..可以实现滴. 打开终端,输入: 1
  • Gson使用一（Gson） eksliang jsongson
    转载请出自出处：http://eksliang.iteye.com/blog/2175401 一.概述 从结构上看Json，所有的数据（data）最终都可以分解成三种类型： 第一种类型是标量（scalar），也就是一个单独的字符串（string）或数字（numbers），比如"ickes"这个字符串。 第二种类型是序列（sequence），又叫做数组（array）
  • android点滴4 gundumw100 android
    Android 47个小知识 http://www.open-open.com/lib/view/open1422676091314.html Android实用代码七段（一） http://www.cnblogs.com/over140/archive/2012/09/26/2611999.html http://www.cnblogs.com/over140/arch
  • JavaWeb之JSP基本语法 ihuning javaweb
      目录   JSP模版元素  JSP表达式  JSP脚本片断  EL表达式  JSP注释  特殊字符序列的转义处理  如何查找JSP页面中的错误   JSP模版元素    JSP页面中的静态HTML内容称之为JSP模版元素，在静态的HTML内容之中可以嵌套JSP
  • App Extension编程指南（iOS8/OS X v10.10）中文版 啸笑天 ext
             当iOS 8.0和OS X v10.10发布后，一个全新的概念出现在我们眼前，那就是应用扩展。顾名思义，应用扩展允许开发者扩展应用的自定义功能和内容，能够让用户在使用其他app时使用该项功能。你可以开发一个应用扩展来执行某些特定的任务，用户使用该扩展后就可以在多个上下文环境中执行该任务。比如说，你提供了一个能让用户把内容分
  • SQLServer实现无限级树结构 macroli oraclesqlSQL Server
    表结构如下： 数据库id path titlesort 排序 1 0 首页 0 2 0,1 新闻 1 3 0,2 JAVA 2 4 0,3 JSP 3 5 0,2,3 业界动态 2 6 0,2,3 国内新闻 1 创建一个存储过程来实现，如果要在页面上使用可以设置一个返回变量将至传过去   create procedure test as begin decla
  • Css居中div，Css居中img，Css居中文本，Css垂直居中div qiaolevip 众观千象学习永无止境每天进步一点点css
    /**********Css居中Div**********/ div.center { width: 100px; margin: 0 auto; } /**********Css居中img**********/ img.center { display: block; margin-left: auto; margin-right: auto; }
  • Oracle 常用操作(实用) 吃猫的鱼 oracle
    SQL>select text from all_source where owner=user and name=upper('&plsql_name');  SQL>select * from user_ind_columns where index_name=upper('&index_name');  将表记录恢复到指定时间段以前
  • iOS中使用RSA对数据进行加密解密 witcheryne iosrsaiPhoneobjective c
      RSA算法是一种非对称加密算法,常被用于加密数据传输.如果配合上数字摘要算法, 也可以用于文件签名. 本文将讨论如何在iOS中使用RSA传输加密数据. 本文环境 mac os  openssl-1.0.1j, openssl需要使用1.x版本, 推荐使用[homebrew](http://brew.sh/)安装. Java 8 RSA基本原理 RS
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他