My Pastes
Public Pastes
Layout Width
Share Pastebin
Guest
Public paste!

Untitled

By: a guest | May 26th, 2010 | Syntax: JavaScript | Size: 21.33 KB | Hits: 560 | Expires: Never
Download | Raw | Embed | Report abuse
Copy text to clipboard
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta name="author" content="xiaojue,designsor@gmail.com">
  7. <script src="lib/js/jquery-1.4.2.js" type="text/javascript"></script>
  8. <link type="text/css" href="lib/css/gz_base.css" rel="stylesheet" media="screen" />
  9. <link type="text/css" href="lib/css/gz_layout.css" rel="stylesheet" media="screen" />
  10. <link rel="stylesheet" href="lib/css/jquery.treeview.css" type="text/css" />
  11. <link href="lib/css/tuzi.css" rel="stylesheet" type="text/css" media="screen" />
  12. <script type="text/javascript" src="lib/js/jquery.treeview.js"></script>
  13. <script language="javascript" type="text/javascript" src="lib/My97DatePicker/WdatePicker.js"></script>
  14. <script>
  15. $(function(){
  16.         /*
  17.         var treedata={
  18.                 'class':'muentree treeview-gray',
  19.                 'id':'example',
  20.                 'treedata':{
  21.                         'Folder 1':{
  22.                                         'root':{'Item 1.1':0},
  23.                                         'state':'close'
  24.                         },
  25.                         'Folder 2':{
  26.                                         'root':{
  27.                                                 'Subfolder 2.1':{
  28.                                                 'File 2.1.1':0,
  29.                                                 'File 2.1.2':0,
  30.                                                 'state':'close'
  31.                                                 },
  32.                                         'File 2':0
  33.                                         },
  34.                                         'state':'close'
  35.                         },
  36.                         'Folder 3':{
  37.                                 'root':{
  38.                                         'File 3.1':0,
  39.                                         'state':'close'
  40.                                 },
  41.                                 'state':'close'
  42.                         },
  43.                         'File 4':0
  44.                 }
  45.         }
  46.         */
  47.     $("#example").treeview();
  48. });
  49.   </script>
  50. <title>系统首页</title>
  51. </head>
  52.  
  53. <body>
  54.         <div class='gz_head'>
  55.                 <div class='logo'><a href='index.html'></a></div>
  56.                 <div class='mainmuen'>
  57.                         <ul class='mainnav'>
  58.                                 <li class='linow'><a href='index.html' class='anow'>首页</a></li>
  59.                                 <li><a href='muensystem.html'>菜单管理</a></li>
  60.                                 <li><a href='datalib.html'>数据字典</a></li>
  61.                         </ul>
  62.                         <ul class='breadnav'>
  63.                                 <li><a href='index.html'>首页</a><span>&gt;&gt;</span></li>
  64.                                 <li><a href='#'>一级菜单</a><span>&gt;&gt;</span></li>
  65.                                 <li><a href='#'>二级菜单</a><span>&gt;&gt;</span></li>
  66.                                 <li><a href='#' class='nowbreadnav'>四级菜单</a></li>
  67.                         </ul>
  68.                 </div>
  69.         </div>
  70.         <!--head end ,left begin -->
  71.         <div class='gz_left'>
  72.                         <ul class='muentree treeview-gray' id='example'>
  73.                                 <li class="closed"><span>Folder 1</span>
  74.                                         <ul>
  75.                                                 <li><span><a href='#'>Item 1.1</a></span></li>
  76.                                         </ul>
  77.                                 </li>
  78.                                 <li class="closed">
  79.                                         <span>Folder 2</span>
  80.                                         <ul>
  81.                                                 <li class="closed">
  82.                                                         <span>Subfolder 2.1</span>
  83.                                                         <ul>
  84.                                                                 <li><span><a href='#'>File 2.1.1</a></span></li>
  85.                                                                 <li><span><a href='#'>File 2.1.2</a></span></li>
  86.                                                         </ul>
  87.                                                 </li>
  88.                                                 <li><span><a href='#'>File 2.2</a></span></li>
  89.                                         </ul>
  90.                                 </li>
  91.                                 <li class="closed"><span class="folder">Folder 3</span>
  92.                                         <ul>
  93.                                                 <li><span><a href='#'>File 3.1</a></span></li>
  94.                                         </ul>
  95.                                 </li>
  96.                                 <li><span><a href='#'>File 4</a></span></li>
  97.                         </ul>
  98.         </div>
  99.         <!--left end ,main begin -->
  100.                 <div class='gz_main'>
  101.                         <h1>四级菜单</h1>
  102.                         <div id='datatable' class='jtable'></div>
  103.                 </div>
  104.         <!--main end ,bottom begin -->
  105.         <div class='gz_bottom'>service system copyright 2007-2010</div>
  106.  
  107. </body>
  108. <script>
  109.         /**
  110.          * 缺少loading状态
  111.          * 先做其他页面，现在的版本不影响程序的对接和调试，最后再补全上面2项.
  112.          */
  113.        
  114.        
  115.        
  116. //后台数据
  117. var data={
  118.         'theadtitle':{'name':[{'none':'<input type="checkbox">'},{'title1':'标题头一'},{'title2':'标题头二'},{'title3':'标题头三'},{'title4':'标题头四'},{'title5':'标题头五'}],'width':['30','100','150','100','200','100']},
  119.         'tbodydata':[
  120.                                 [{'checkbox':'2'},'abc','def','obq','rst','cbd'],
  121.                                
  122.                                 [{'checkbox':'2'},'abc','def','obq','rst','cbd'],
  123.                                
  124.                                 [{'checkbox':'3'},'abc','def','obq','rst','cbd']
  125.                                 ],
  126.         'search':[
  127.                         {'type': 'text','content':{'id': '编号'}},
  128.                         {'type':'int','content':{'num':'数字'}},
  129.                         {'type': 'time','content': {'dt': '日期'}}
  130.                         ]
  131. };
  132.  
  133. //前台配置
  134. var defaults={
  135.                    'path':'datatable',
  136.                    'tabletitle':'监察局委办局数据159',
  137.                    'adclass':"tabledemo",
  138.                    'zwidth':680,
  139.                    'url':"example.php",
  140.                    'bottom':false,
  141.                    'rowNum':30,
  142.                    'pagesize':7, //必须是7;
  143.                    'trclick':"jclick",
  144.                    'sort':true,
  145.                    'search':true
  146. };
  147.  
  148. (function(){
  149.         var jtable=function(data,defaults){
  150.                 //构造参数
  151.                 this.defaults = {
  152.                    'data':data,
  153.                    'defaults':defaults
  154.                 };
  155.                 this.tote=this.get('defaults','rowNum');
  156.                 this.viewsize=this.get('data','tbodydata').length;
  157.                 this.pages=Math.ceil(this.tote/this.viewsize);
  158.                 this.nowpage=1;
  159.                 this.searchform=false;
  160.                 this.url=this.get('defaults','url');
  161.         };
  162. jtable.prototype={
  163. //get方法
  164.         get:function(obj,objname){
  165.           if(this.defaults.hasOwnProperty(obj)){
  166.                 var data=this.defaults[obj];
  167.                 if(typeof data[objname]=='undefined') return false;
  168.                 return data[objname];
  169.           }else{
  170.                 return false;
  171.           }
  172.         },
  173.        
  174. //取得容器方法
  175.         getdiv:function(){ //取得path的容器
  176.                 var j=this;
  177.                 var id=j.get('defaults','path')
  178.                 return $('#'+id);
  179.         },
  180.        
  181. //创建表格head
  182.         creathead:function(){
  183.         var j=this;
  184.         var datatitle=j.get('data','theadtitle').name; //取得标题头
  185.         var width=j.get('data','theadtitle').width; //取得宽度信息
  186.  
  187.         //表格字符数组
  188.         var tablehead=['<table width="'+j.get('defaults','zwidth')+'" class="'+j.get('defaults','adclass')+'">'];
  189.         //标题是否包含
  190.         if(j.get('defaults','tabletitle')!='') tablehead.unshift('<h1>'+j.get('defaults','tabletitle')+'</h1>');
  191.         //产生标题头
  192.         tablehead.push('<thead><tr>');
  193.         for(var i=0;i<datatitle.length;i++){
  194.                 for(var t in datatitle[i]){
  195.                         tablehead.push('<th width="'+width[i]+'" action="'+t+'">'+datatitle[i][t]+'</th>');
  196.                 }
  197.         };
  198.         tablehead.push('</tr></thead>');//返回表格标题头部HTML
  199.         return tablehead=tablehead.join("");
  200.         },
  201.        
  202. //创建表body格内容
  203.         creatbody:function(){
  204.                 var j=this;
  205.                 var databody=j.get('data','tbodydata'); //取得数据
  206.                 //产生表格主题数据
  207.                 var tablebody=['<tbody>'];
  208.                 for(var k=0;k<databody.length;k++){
  209.                         tablebody.push('<tr>');
  210.                         //根据属性输出相对应单元格
  211.                         for(var c=0;c<databody[k].length;c++){
  212.                         //类型判断 
  213.                         if(typeof databody[k][c]=='string') {
  214.                                 tablebody.push('<td>'+databody[k][c]+'</td>');
  215.                         }else{
  216.                                 j.fixtype(tablebody,databody[k][c]);
  217.                         }
  218.                        
  219.                 };
  220.                         tablebody.push('</tr>');
  221.                 };
  222.                 tablebody.push('</tbody>');
  223.                 return tablebody=tablebody.join("");
  224.         },
  225.        
  226. //创建表格尾部
  227.         creatfoot:function(){
  228.                 var j=this;
  229.                 var colspan=j.get('data','theadtitle').name.length; //单元格colspan
  230.                 var tfoot=['<tfoot><tr><td colspan="'+colspan+'"><span class="pagego">第 <input type="text" maxlength="3" /><input type="button" value="go" /> 页 共'+j.tote+'条 每页'+j.viewsize+'条 共'+j.pages+'页 <a href="#jfirst" class="jfirst">首 页</a> <a href="#jend" class="jend">尾 页</a></span><span class="pagenav">'];
  231.                 j.creatpage(tfoot);
  232.                 tfoot.push('</span></td></tr>'); //创建分页
  233.                 if (j.get('defaults', 'sort')) {
  234.                         tfoot.push('<tr><td colspan="' + colspan + '"><input type="text" class="jsearchtxt"/> <input type="button" value="搜索" class="jsearch"/> <input type="button" value="高级" class="jsearchad"/></td></tr>'); //创建搜索行
  235.                 }
  236.                 tfoot.push('</tfoot></table>');
  237.                 return tfoot=tfoot.join("");
  238.         },
  239.        
  240. //创建搜索表单
  241.         creatform:function(){
  242.                 var j=this;
  243.                 var searchdata=j.get('data','search');
  244.                 var form=[];
  245.                 form.push('<div class="jtableform">');
  246.                 form.push('<h2>搜 索</h2> <a href="#close" class="closeform">X</a> <hr>');
  247.                 for(var i=0;i<searchdata.length;i++){
  248.                         if(j.searchtype.hasOwnProperty(searchdata[i]['type'])){
  249.                                 j.searchtype[searchdata[i]['type']](form,searchdata[i]['content']);
  250.                         }
  251.                 }
  252.                 form.push('<p><input type="button" value="搜一下" class="jsubmit"/> <input type="button" value="重 置" class="jreset"/></p>');
  253.                 form.push('</div>');
  254.                 form=form.join("");
  255.                 $('body').prepend(form);
  256.                
  257.                 function creattime(){
  258.                 $('.searchinputtime').each(function(i){
  259.                         $(this).after("<img src='lib/My97DatePicker/skin/calendar_pic.gif' align='absmiddle' class='timeclass'>").css({"width": "125px"});
  260.                         if($(this).attr("id")==""){$(this).attr("id","time"+i);}
  261.                 });
  262.                 $(".timeclass").click(function(){
  263.                         timeid=$(this).prev().attr("id");
  264.                         WdatePicker({el:timeid});
  265.                 });
  266.                 }
  267.                
  268.                 creattime();
  269.                
  270.                 $('.intsel').each(function(){
  271.                         $(this).change(function(){
  272.                         var v=$(this).val();
  273.                         if(v==3){
  274.                                 $(this).next('input').after('<input type="text" value="" class="int2">');
  275.                         }else{
  276.                                 $(this).siblings().not($(this).next('input').add($(this).prev('label'))).remove();
  277.                         }
  278.                         });
  279.                 });
  280.                 $('.timesel').each(function(){
  281.                         $(this).change(function(){
  282.                         var v=$(this).val();
  283.                         if(v==3){
  284.                                 $(this).next('input').after('<input type="text" class="searchinputtime time2" readOnly="true">');
  285.                                 $('.timeclass').remove();
  286.                         }else{
  287.                                 $(this).siblings().not($(this).next('input').add($(this).prev('label'))).remove();
  288.                                 $('.timeclass').remove();
  289.                         }
  290.                         creattime();
  291.                         });
  292.                 });
  293.         },
  294.        
  295. //针对单元格操作
  296.         fixtype:function(ary,obj){
  297.                 var types=[];
  298.                 for(var f in obj){
  299.                         types.push(f);
  300.                 }
  301.                 types=types.toString();
  302.                 if(this.type().hasOwnProperty(types)){
  303.                         return this.type()[types](ary,obj);
  304.                 }
  305.         },
  306. //创建分页
  307.         creatpage:function(ary){
  308.                 var j=this;
  309.                 var maxpages=j.get('defaults','pagesize');
  310.                 var pagesclone=j.pages;
  311.                 if (j.pages > maxpages) pagesclone=maxpages;
  312.                 ary.push('<a href="#prve" class="prve">《</a>');
  313.                 for(var i=1;i<=pagesclone;i++){
  314.                         ary.push('<a href="#p'+i+'" flg="pags">'+i+'</a>');
  315.                 }
  316.                 ary.push('<a href="#next" class="next">》</a>');
  317.                 return ary;
  318.         },
  319. //链接对象
  320.         ontype:{
  321.                 'text':function(ary,obj){
  322.                         return ary.push('<td><a href="'+obj['link']['href']+'">'+obj['text']+'</a><img src="'+obj['img']+'" /></td>');
  323.                 },
  324.                 'img':function(ary,obj){
  325.                         return ary.push('<td>'+obj['text']+'<a href="'+obj['link']['href']+'"><img src="'+obj['img']+'" /></a></td>');
  326.                 },
  327.                 'img,text':function(ary,obj){
  328.                         return ary.push('<td><a href="'+obj['link']['href']+'">'+obj['text']+'<img src="'+obj['img']+'" /></a></td>');
  329.                 }
  330.         },
  331. //单元格类型检测
  332.         type:function(){
  333.                 var control=this.ontype;
  334.                 return {
  335.                 'text':function(ary,obj){
  336.                         return ary.push('<td>'+obj['text']+'</td>');
  337.                 },
  338.                 'img':function(ary,obj){
  339.                         return ary.push('<td><img src="'+obj['img']+'"></td>');
  340.                 },
  341.                 'text,img':function(ary,obj){
  342.                         return ary.push('<td>'+obj['text']+'<img src="'+obj['img']+'"></td>');
  343.                 },
  344.                 'text,link':function(ary,obj){
  345.                         return ary.push('<td><a href="'+obj['link']['href']+'">'+obj['text']+'</a></td>');
  346.                 },
  347.                 'text,img,link':function(ary,obj){
  348.                         var ons=[];
  349.                         for(var i=0;i<obj['link']['on'].length;i++){
  350.                                 ons.push(obj['link']['on'][i]);
  351.                                 }
  352.                                 ons=ons.toString();
  353.                         if(control.hasOwnProperty(ons)){
  354.                                 return control[ons](ary,obj);
  355.                         }
  356.                 },
  357.                 'img,link':function(ary,obj){
  358.                         return ary.push('<td><a href="'+obj['link']['href']+'"><img src="'+obj['img']+'"><a></td>');
  359.                 },
  360.                 'hidenvalue':function(ary,obj){
  361.                         return ary.push('<td><input type="hidden" value="'+obj['hidenvalue']+'"/></td>');
  362.                 },
  363.                 'checkbox':function(ary,obj){
  364.                         return ary.push('<td><input class="checkone" type="checkbox" value="'+obj['checkbox']+'"/></td>');
  365.                 }
  366.         };
  367.         },
  368. //初始化步骤，并给相对应的数字标签加样式
  369.         fixclass:function(){
  370.                 var alls=this.getdiv().find('.pagenav>a');
  371.                 alls.eq(1).addClass('nowpage');
  372.         },
  373. //鼠标点击数字标签的功能，输入框联动功能，左右按钮切换判断;.........
  374.         pageclick:function(){
  375.         var j=this;
  376.         var alls=j.getdiv().find('.pagenav');
  377.         var als=j.getdiv().find('.pagenav>a[flg="pags"]');
  378.         var pagego=j.getdiv().find('.pagego');
  379.         if(als.length>7) throw new Error('page size not appoint');
  380.         alls.click(function(e){
  381.                 e=e.target || e.srcElement;
  382.                 var node=e.tagName.toLowerCase();
  383.                         if(node!='a') return;
  384.                         if(node=='a' && e.className=='prve'){
  385.                         j.nowpage--;
  386.                         if(j.nowpage<1) j.nowpage=1;
  387.                         als.each(function(){$(this).attr('class','')});
  388.                         uppage(j.nowpage);
  389.                         return;
  390.                         }else if(node=='a' && e.className=='next'){
  391.                         j.nowpage++;
  392.                         if(j.nowpage >= j.pages) j.nowpage=j.pages;
  393.                         als.each(function(){$(this).attr('class','')});
  394.                         uppage(j.nowpage);
  395.                         return;
  396.                         };  //上一页||下一页
  397.                         j.nowpage=parseInt($(e).text());
  398.                         if(j.pages<=7){
  399.                                 e.className='nowpage';
  400.                         }else{
  401.                                 uppage(j.nowpage);
  402.                         }
  403.         });
  404.        
  405.         function uppage($that){
  406.                 als.each(function(){$(this).attr('class','')});
  407.                 if($that<5){
  408.                         als.each(function(i){i=i+1;$(this).text(i)});
  409.                         alls.find('a:contains('+$that+')').addClass('nowpage');
  410.                 }else if($that>j.pages-3){
  411.                         var ary=[];
  412.                         for(var i=0;i<7;i++){
  413.                                 ary[i]=j.pages-6+i;
  414.                         };
  415.                         als.each(function(i){$(this).text(ary[i])});
  416.                         alls.find('a:contains('+$that+')').addClass('nowpage');
  417.                 }else{
  418.                         var ary=[];
  419.                         for(var i=0;i<7;i++){
  420.                                 ary[i]=$that-3+i;
  421.                         }
  422.                         als.each(function(i){$(this).text(ary[i])});
  423.                         alls.find('a:contains('+$that+')').addClass('nowpage');
  424.                 }
  425.                 var requestdata='p='+j.nowpage;
  426.                 j.ajax(requestdata);
  427.         };
  428.        
  429.         pagego.find('input[type="text"]').keydown(function(e){
  430.                 if(e.keyCode==13 || e.which==13){
  431.                         var page=$.trim($(this).val());
  432.                         if(page<=0 || page>j.pages || isNaN(page)){alert("不存在的页码"); return false;}
  433.                         j.nowpage=parseInt(page);
  434.                         uppage(j.nowpage);
  435.                         }
  436.                 });
  437.  
  438.         pagego.find('input[type="button"]').click(function(){
  439.                 var page=$.trim($(this).prev("input").val());
  440.                 if(page<=0 || page>j.pages || isNaN(page)){alert("不能输入不存在的页码"); return false;}
  441.                 j.nowpage=parseInt(page);
  442.                 uppage(j.nowpage);
  443.                 });
  444.        
  445.         },
  446.                
  447.         havetrclick:function(cls){
  448.                 if(cls!=''){
  449.                 var that=this.getdiv();
  450.                 that.find('tbody>tr').click(function(){
  451.                                 var thisinput=$("input[type='checkbox']",this);
  452.                                 if(!thisinput.attr("checked")){
  453.                                         $('td',this).addClass(cls);
  454.                                         thisinput.attr("checked",true);
  455.                                 }else{
  456.                                         $('td',this).removeClass(cls);
  457.                                         thisinput.attr("checked",false);
  458.                                 }
  459.                 });
  460.                 that.find('tbody .checkone').click(function(event){
  461.                         event.stopPropagation();
  462.                                 if($(this).attr("checked")){
  463.                                         $(this).closest('tr').find('td').addClass(cls);
  464.                                         $(this).attr("checked",true);
  465.                                 }else{
  466.                                         $(this).closest('tr').find('td').removeClass(cls);
  467.                                         $(this).attr("checked",false);
  468.                                 }
  469.                 });
  470.                 that.find('thead input[type="checkbox"]').click(function(){
  471.                         if($(this).attr('checked')){
  472.                         $('.checkone').attr('checked',true);
  473.                         that.find('tbody td').addClass(cls);
  474.                         }else{
  475.                         $('.checkone').attr('checked',false);
  476.                         that.find('tbody td').removeClass(cls);
  477.                         }
  478.                 });
  479.                 };
  480.         },
  481.                
  482.         havebottom:function(flg){
  483.                 if(!flg){
  484.                         this.getdiv().find('tfoot>td').html('');
  485.                 }
  486.         },
  487.        
  488.         sort:function(flg){
  489.                 if(flg){
  490.                         var j=this;
  491.                         j.getdiv().find('thead th').not(':has("input")').toggle(function(){
  492.                                 var requestdata='rowname='+$(this).attr('action')+'&sort=ASC';
  493.                                 j.ajax(requestdata);
  494.                         },function(){
  495.                                 var requestdata='rowname='+$(this).attr('action')+'&sort=DESC';
  496.                                 j.ajax(requestdata);
  497.                         }).hover(function(){
  498.                                 $(this).addClass('sort');
  499.                         },function(){
  500.                                 $(this).removeClass('sort');
  501.                         });
  502.                 }
  503.         },
  504.        
  505.         searchtype:{
  506.                 'text':function(ary,obj){
  507.                         for(var n in obj){
  508.                                 return ary.push('<p><label action='+n+'>'+obj[n]+'</label>: <input type="text" class="txt1"/></p>');
  509.                         }
  510.                 },
  511.                 'int':function(ary,obj){
  512.                         for (var n in obj) {
  513.                                 return ary.push('<p><label action=' + n + '>' + obj[n] + '</label>: <select class="intsel"><option value=">">大于</option><option value="<">小于</option><option value="2">等于</option><option value="3">介于</option> <input type="text" class="int1"/></p>');
  514.                         }
  515.                 },
  516.                 'time':function(ary,obj){
  517.                         for (var n in obj) {
  518.                                 return ary.push('<p><label action=' + n + '>' + obj[n] + '</label>: <select class="timesel"><option value=">">大于</option><option value="<">小于</option><option value="2">等于</option><option value="3">介于</option> <input type="text" class="searchinputtime time1" readOnly="true"/></p>');
  519.                         }
  520.                 }
  521.         },
  522.        
  523.         jmask:function(){
  524.                 $('body').prepend('<div class="jmask">');
  525.                 var h=$(document).scrollTop();
  526.                 var w=document.body.scrollWidth;
  527.                 $('.jmask').width(w).height(document.body.scrollHeight).fadeTo(0,0.5);
  528.                 $('.jtableform').css({'top':150+h,'left':(w/2)-250});
  529.         },
  530.        
  531.         search:function(flg){
  532.                 if(flg){
  533.                         var j=this;
  534.                         var self=j.getdiv();
  535.                         var jsearch=self.find('tfoot input.jsearch');
  536.                         var jsearchad=self.find('tfoot input.jsearchad');
  537.                         var jsearchtxt=self.find('tfoot input.jsearchtxt');
  538.                         jsearch.click(function(){
  539.                                 var requestdata='search='+jsearchtxt.val();
  540.                                 j.ajax(requestdata);
  541.                         });
  542.                        
  543.                         jsearchad.click(function(){
  544.                                 if(!j.searchform){
  545.                                         j.creatform();
  546.                                         j.jmask();
  547.                                         j.searchform=true;
  548.                                 }else{
  549.                                         $('.jtableform,.jmask').show();
  550.                                 }
  551.                                 ie9();
  552.                         });
  553.                        
  554.                         jsearchtxt.keydown(function(e){
  555.                                 if (e.keyCode == 13 || e.which == 13) {
  556.                                         var requestdata='search='+jsearchtxt.val();
  557.                                         j.ajax(requestdata);
  558.                                 }
  559.                         });
  560.                        
  561.                         $('.closeform').live('click', function() {
  562.                                 $('.jtableform,.jmask').hide();
  563.                         });
  564.                        
  565.                         $('.jsubmit').live('click', function() {
  566.                                 //需要检测输入的是否合法
  567.                                 var flg=true;
  568.                                 $('.int1,.int2').each(function(){
  569.                                         var v=$(this).val();
  570.                                         if (!!isNaN(v)) {
  571.                                                 var t=$(this).siblings('label').text();
  572.                                                 alert(t+'输入的必须为数字');
  573.                                                 flg=false;
  574.                                                 return false;
  575.                                         };
  576.                                 });
  577.                                 if(!flg) return;
  578.                                 var searchary=[];
  579.                                 $('.jtableform p:not(:last)').each(function(i){
  580.                                         var value=[];
  581.                                         for(var j=0;j<$('input',this).length;j++){
  582.                                                 if($('input:eq('+j+')',this).val()=="") continue;
  583.                                                 var compare=$('select',this).val();
  584.                                                 if(typeof compare=='undefined' || compare==3 || compare==2) compare="";
  585.                                                 var jvalue=$('input:eq('+j+')',this).val();
  586.                                                 value.push(compare+jvalue);
  587.                                         }
  588.                                         value=value.join('~');
  589.                                         var name=$(this).find('label').attr('action');
  590.                                         if(value=='') return true;
  591.                                         searchary.push(name+"="+value);
  592.                                 });
  593.                                 searchary=searchary.join("&");
  594.                                 j.ajax(searchary);
  595.                         });
  596.                        
  597.                         $('.jreset').live('click', function() {
  598.                                 $('.jtableform input[type="text"]').val("");
  599.                         });
  600.                        
  601.                 }
  602.         },
  603. //处理新数据
  604.     updatatable:function(data){
  605.                         var j = this;
  606.                         //产生新表格主题数据
  607.                         var tablebody = [];
  608.                         for (var k = 0; k < data.length; k++) {
  609.                                 tablebody.push('<tr>');
  610.                                 //根据属性输出相对应单元格
  611.                                 for (var c = 0; c < data[k].length; c++) {
  612.                                         //类型判断 
  613.                                         if (typeof data[k][c] == 'string') {
  614.                                                 tablebody.push('<td>' + data[k][c] + '</td>');
  615.                                         }
  616.                                         else {
  617.                                                 j.fixtype(tablebody, data[k][c]);
  618.                                         }
  619.                                        
  620.                                 };
  621.                                 tablebody.push('</tr>');
  622.                         };
  623.                         tablebody = tablebody.join("");
  624.                        
  625.                         j.getdiv().find('tbody').html(tablebody);
  626.                
  627.                 //加载IE9
  628.                 ie9();
  629.                
  630.         },     
  631.        
  632. //ajax方法
  633.         ajax:function(data){
  634.                 var j=this;
  635.                 $.ajax({
  636.                           type:"GET",
  637.                           url:j.url,
  638.                           data:data,
  639.                           success: function(jsondata){
  640.                                 alert("访问请求的json数据位为:"+jsondata);
  641.                                 var obj = jQuery.parseJSON(jsondata);
  642.                                 var data = obj.tbodydata;
  643.                                 j.updatatable(data);
  644.                           },
  645.                           error:function(){
  646.                                 alert('请求服务器端失败，检查请求URL地址可访问性');
  647.                           },
  648.                           complete:function(xhr,ts){
  649.                                 var test=["xhr:"+xhr,"ts:"+ts,"requesturl:"+this.url];
  650.                                 alert(test);
  651.                           }
  652.                 });
  653.         },
  654.        
  655. //创建表格并输出
  656.         creattable:function(){
  657.         var j=this;
  658.         var w=j.get('defaults','zwidth');
  659.         var wary=j.get('data','theadtitle').width;
  660.         var sw=0; //实际长度；
  661.         for(var i=0;i<wary.length;i++){
  662.                 sw=sw+parseInt(wary[i]);
  663.         };
  664.                 try{  //处理输出时的宽度错误；
  665.                         if(sw<w){
  666.                         throw '单元格数组宽度的和'+sw+'px小于设置的表格总宽度'+w+'px';
  667.                         }else{
  668.                                 var tablestr=[];
  669.                                 var thead=j.creathead();
  670.                                 var tbody=j.creatbody();
  671.                                 var tfoot=j.creatfoot();
  672.                                 tablestr=tablestr.concat(thead,tbody,tfoot);
  673.                                 tablestr=tablestr.join("");
  674.                                 var id=j.get('defaults','path');
  675.                                 //输出到容器
  676.                                 document.getElementById(id).innerHTML=tablestr;
  677.                                 document.getElementById(id).style.cssText='overflow-x:auto;overflow-y:hidden;width:'+(w+2)+'px';
  678.                                 //输出表格后的其他操作
  679.                                 j.fixclass(); //加载指定初始部分样式
  680.                                 j.pageclick(); //加载页码点击事件函数
  681.                                 j.havebottom(j.get('defaults','bottom')); //是否含有页面尾部
  682.                                 j.havetrclick(j.get('defaults','trclick')); //是否含有tr点击
  683.                                 j.sort(j.get('defaults','sort')); //是否含有排序
  684.                                 j.search(j.get('defaults','search')); //是否含有搜索
  685.                                 //..扩展函数都可以统一写在此处，因为表格已经渲染完成..//
  686.                                 //蒙板层的函数
  687.                                 $(window).bind('scroll resize', function() {
  688.                                  $('.jmask').width(document.body.offsetWidth).height(document.body.offsetHeight);
  689.                                         var h=$(document).scrollTop();
  690.                                         var w=document.body.scrollWidth;
  691.                                         $('.jtableform').css({'top':150+h,'left':(w/2)-250});
  692.                                 });
  693.                         }
  694.                 }catch(e){
  695.                         alert(e.message);
  696.                 }
  697.         }
  698.  
  699. };
  700. var a=new jtable(data,defaults);
  701. a.creattable();
  702. function ie9(){
  703.                 if ( $.browser.msie ){
  704.                                 if($.browser.version!=9.0){
  705.                                         $.getScript('lib/js/IE9.js');
  706.                                 };
  707.                 }
  708. };
  709. })();
  710. </script>
  711. <!--[if lt IE 9]><script src="lib/js/IE9.js"></script><![endif]-->
  712. </html>
create new paste | create new version of this paste RAW Paste Data