posts - 9,  comments - 11,  trackbacks - 0
          http://www.eps2008.cn/index.php?aid=50 修改flexigrid源碼一(json,checkbox)

           

          1.修改默認的json格式為key:value

          修改前

          rows: [{id:'ZW',cell:['ZW','ZIMBABWE','Zimbabwe','ZWE','716']},{id:'ZW',cell:['ZW','ZIMBABWE','Zimbabwe','ZWE','716']}]

          修改后

          rows: [{id:'1',name:'Anson',sex:'男',email:'chents@gpcsoft',qq:'75526201'},{id:'2',name:'Anson',sex:'男',email:'chents@gpcsoft',qq:'75526201'}]

          源碼修改說明

          找到 if (p.dataType=='json')

          將其后的大括號{}內容改為:

          $.each
          (
          data.rows,
          function(i,row)
          {
          var tr = document.createElement('tr');
          if (i % 2 && p.striped) tr.className = 'erow';

          if (row.id) tr.id = 'row' + row.id;

          //by anson QQ:75526201 chents@gpcsoft.com 轉載請保留
          var tdVal = [];

          //給每行添加id
          if (p.rowId){

          $.each( data.rows[i], function(x,y){

          if(p.rowId==x){tr.setAttribute('id',y);
          }

          })
          }

          if (p.colModel){

          for (j=0;j<p.colModel.length;j++){

          var cm = p.colModel[j];
          //取列名
          var seleceName = cm.name;
          //json Bug修復://打包文件中未加入,請自行加入 
          if(typeof(data.rows[i][seleceName])=='undefined'){data.rows[i][seleceName]=''}

          //過濾key
          $.each( data.rows[i], function(x,y){

          if(seleceName==x){tdVal.push(y)}

          })

          }
          }

          //add cell
          $('thead tr:first th',g.hDiv).each
          (
          function ()
          {

          var td = document.createElement('td');
          var idx = $(this).attr('axis').substr(3);
          td.align = this.align;
          td.innerHTML = tdVal[idx];
          //td.innerHTML = row.cell[idx];
          $(tr).append(td);
          td = null;
          }
          );


          if ($('thead',this.gDiv).length<1) //handle if grid has no headers
          {

          for (idx=0;idx<cell.length;idx++)
          {
          var td = document.createElement('td');
          //td.innerHTML = row.cell[idx];
          td.innerHTML = tdVal[idx];
          $(tr).append(td);
          td = null;
          }
          }

          $(tbody).append(tr);
          tr = null;
          }
          );
           

          2.加入checkbox

          只要設置checkbox:true即可在前面顯示多選框

          源碼修改說明

          a.找到 $('div:eq('+n+')',g.cDrag).css({'left':cdpos+'px'}).show();

          替換為:

          //添加多選框
          if (p.checkbox) {
          $('div:eq('+n+')',g.cDrag).css({'left':cdpos+22+'px'}).show();
          }
          else{
          $('div:eq('+n+')',g.cDrag).css({'left':cdpos+'px'}).show();
          }

          b.找到//add cell

          前面插入:

          //添加多選框
          if (p.checkbox) {

          var cth = $('<th/>');

          var cthch = $('<input type="checkbox" value="' + $(tr).attr('id') +'"/>');

          var objTr = $(tr);

          cthch.addClass("noborder").click(function(){

          if(this.checked){

          objTr.addClass('trSelected');
          }
          else{
          objTr.removeClass('trSelected');
          }
          })

          cth.addClass("cth").attr({ width: "22"}).append(cthch);

          $(tr).prepend(cth);


          }

          c.找到$(this).toggleClass('trSelected');

          后面插入:

          //添加多選框
          if(p.checkbox){
          if($(this).hasClass('trSelected')){
          $(this).find('input')[0].checked=true;
          }
          else{
          $(this).find('input')[0].checked=false
          }
          }

          d.找到if ($('th',g.hDiv).length)

          在其后的{}大括號中加入

          //添加多選框
          if (p.checkbox) {
          $('tr',g.hDiv).each(
          function(){

          var cth = $('<td/>');

          var cthch = $('<input type="checkbox"/>');

          cthch.click(function(){
          if(this.checked){
          $('tbody tr',g.bDiv).each(function(){
          $(this).addClass('trSelected').find('input')[0].checked=true;
          })
          }
          else{

          $('tbody tr',g.bDiv).each(function(){
          $(this).removeClass('trSelected').find('input')[0].checked=false;
          })
          }
          })

          cth.addClass("cth").attr({ width: "22" }).append(cthch);

          $(this).prepend(cth);

          })
          };

          e.找到p = $.extend({

          添加默認設置

          checkbox:false,//是否要多選框
          rowId:'id',//綁定行的id

           

          修改后結果

          點擊查看原圖

          未加入多條件搜索,右鍵,打印,導出Excel等功能,如有需要聯系作者Anson,QQ:75526201

          點擊查看原圖

          修改后文件下載:點擊下載附件

           

           


          http://hi.baidu.com/wzjstrong/blog/item/fc64e036da94221d90ef393b.html
          http://blog.csdn.net/liuzhoulong/article/details/6076071
          jQuery插件flexigrid是像ext的DataGrid一樣的活動表格插件,使用它首先要引入query.js,還要引入flexigrid.js和flexigrid.css
                  看看插件中部分代碼以及說明 

          Titleif (t.grid)   
          1.             return false; // return if already exist   
          2.   
          3.         // apply default properties   
          4.         p = $.extend({   
          5.             height : 200, // flexigrid插件的高度,單位為px   
          6.             width : 'auto', // 寬度值,auto表示根據每列的寬度自動計算   
          7.             striped : true, // 是否顯示斑紋效果,默認是奇偶交互的形式   
          8.             novstripe : false,   
          9.             minwidth : 30, // 列的最小寬度   
          10.             minheight : 80, // 列的最小高度   
          11.             resizable : true, // 是否可伸縮   
          12.             url : false, // ajax方式對應的url地址   
          13.             method : 'POST', // 數據發送方式   
          14.             dataType : 'xml', // 數據加載的類型   
          15.             checkbox : false,// 是否要多選框   
          16.             errormsg : '連接錯誤!',// 錯誤提示信息   
          17.             usepager : false, // 是否分頁   
          18.             nowrap : true, // 是否不換行   
          19.             page : 1, // 默認當前頁   
          20.             total : 1, // 總頁面數   
          21.             useRp : true, // 是否可以動態設置每頁顯示的結果數   
          22.             rp : 15, // 每頁默認的結果數   
          23.             rpOptions : [5,101520253040],// 可選擇設定的每頁結果數   
          24.             title : false,// 是否包含標題   
          25.             pagestat : '顯示第 {from} 條到 {to} 條,共 {total} 條數據',// 顯示當前頁和總頁面的樣式   
          26.             procmsg : '正在處理,請稍候 ...',// 正在處理的提示信息   
          27.             query : '',// 搜索查詢的條件   
          28.             qtype : '',// 搜索查詢的類別   
          29.             nomsg : '沒有數據存在!',// 無結果的提示信息   
          30.             minColToggle : 1, // 允許顯示的最小列數   
          31.             showToggleBtn : true, // 是否允許顯示隱藏列,該屬性有bug設置成false點擊頭腳本報錯   
          32.             hideOnSubmit : true,// 隱藏提交   
          33.             autoload : true,// 自動加載   
          34.             blockOpacity : 0.5,// 透明度設置   
          35.             onToggleCol : false,// 當在行之間轉換時,可在此方法中重寫默認實現,基本無用   
          36.             onChangeSort : false,// 當改變排序時,可在此方法中重寫默認實現,自行實現客戶端排序   
          37.             onSuccess : false,// 成功后執行   
          38.             onSubmit : false   
          39.               // 調用自定義的計算函數   
          40.           }, p);  
          了解了每個屬性的含義后就可以根據自己的需要來配置了,

          Title
          $("#flex1").flexigrid({
          	url: 'post2.php',
          	dataType: 'json',
          	colModel : [
          		{display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
          		{display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
          		{display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
          		{display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
          		{display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
          		],
          	buttons : [
          		{name: 'Add', bclass: 'add', onpress : test},
          		{name: 'Delete', bclass: 'delete', onpress : test},
          		{separator: true}
          		],
          	searchitems : [
          		{display: 'ISO', name : 'iso'},
          		{display: 'Name', name : 'name', isdefault: true}
          		],
          	sortname: "iso",
          	sortorder: "asc",
          	usepager: true,
          	title: 'Countries',
          	useRp: true,
          	rp: 15,
          	showTableToggleBtn: true,
          	width: 700,
          	height: 200
          });   
          
          Title$("#flex1").flexigrid
             (
             {
                  url:  './contract_getAllJsonData.action?startDate=<ss:date name="startDate" format="yyyy-MM-  dd"/>&endDate=<ss:date name="endDate" format="yyyy-MM-dd"/>&contractId=${contractId}',
             dataType: 'json',
             method: 'POST',
             colModel : [
              {display: '廣告位', name : 'advName', width : 300, sortable : true, align: 'center'},
              {display: '開始投放時間', name : 'start', width : 180, sortable : true, align: 'left'},
              {display: '結束投放時間', name : 'end', width : 180, sortable : true, align: 'left'},
              {display: '點擊數', name : 'clicks', width : 80, sortable : true, align: 'left'},
              {display: '曝光數', name : 'impressions', width : 80, sortable : true, align: 'left'},
              {display: '分析', name : 'impressions', width : 80, sortable : true, align: 'left'}
              ],
                sortname: "advName",
             sortorder: "asc",
             usepager: true,
             useRp: true,   
             title: '統計期間該合同廣告位投放',
             showTableToggleBtn: true,
             width: 1000,
             height: 200
             }
           );  
          后臺java代碼(struts2),由于框架不同代碼有可能不同,我這里一次查出了所有需要數據,沒有考慮分頁,需要分頁的話,請將page 等信息傳入后來查詢。
          /**
            * 用于結合flexigrid實現可選表格
            * @return
            */
           public String getAllJsonData() {
            SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd HH:mm");
            ContractReportService service = (ContractReportService) SpringHelper
            .getBean(TMG_REPORTS_CONTRACT);
            Map map = new HashMap();
            map.put("contractId", contractId);
            map.put("startdate", startDate);
            map.put("enddate", endDate);
            list = service.getAdvListbyContract(map);
            try {
            List mapList = new ArrayList();  
            for(int i = 0; i < list.size(); i++) { 
               Map cellMap = new HashMap(); 
               ContractReport cr = (ContractReport)list.get(i);
                     cellMap.put("cell", new Object[] {cr.getAdvName(), formatter.format(cr.getStart()), formatter.format(cr.getEnd()), cr.getClicks(), cr.getImpressions(),"<img alt='分析' src='../image/analyse.gif'>"});    
                     mapList.add(cellMap);  
            }
               Map pageInfo = new HashMap();     
               pageInfo.put("rows", mapList);
               JSONObject object = new JSONObject();  
               object.accumulateAll(pageInfo);
               Struts2Utils.getResponse().setContentType("text/x-json");
               Struts2Utils.getResponse().setCharacterEncoding("UTF-8");
               Struts2Utils.getResponse().setHeader("Cache-Control", "no-cache");
               Struts2Utils.getResponse().getWriter().write(object.toString());
               Struts2Utils.getResponse().getWriter().flush();
               Struts2Utils.getResponse().getWriter().close();
            } catch (IOException e) {
             e.printStackTrace();
            }
            return null;
           }
           最后上圖(用highcharts和flexigrid實現):
          posted on 2011-07-26 20:18 Mon$ter! 閱讀(4093) 評論(2)  編輯  收藏


          FeedBack:
          # re: 修改Flexigrid源碼
          2013-09-21 13:33 | Rajesh
          i not able to add check box as you suggested can i have check box enabled flexigrid.js plugin   回復  更多評論
            
          # re: 修改Flexigrid源碼
          2013-09-21 13:36 | Rajesh
          i was getting error @ add cell, like Uncaught SyntaxError: Unexpected identifier   回復  更多評論
            

          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          <2011年7月>
          262728293012
          3456789
          10111213141516
          17181920212223
          24252627282930
          31123456

          常用鏈接

          留言簿

          隨筆檔案(11)

          文章分類

          最新隨筆

          搜索

          •  

          最新評論

          閱讀排行榜

          評論排行榜

          主站蜘蛛池模板: 崇仁县| 通州市| 淮安市| 静海县| 大关县| 屯昌县| 新绛县| 宜君县| 运城市| 监利县| 阳东县| 阿拉尔市| 博野县| 高青县| 儋州市| 嘉祥县| 辰溪县| 桃江县| 芜湖县| 诏安县| 怀来县| 武山县| 得荣县| 安溪县| 嘉义市| 资阳市| 普陀区| 南部县| 南和县| 汶川县| 苏尼特左旗| 云安县| 崇礼县| 肇庆市| 福贡县| 托克托县| 锦屏县| 同心县| 阳曲县| 涟源市| 莒南县|