Flexigrid例子

1.flexigrid.jsp:

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"%>
 2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4     <head>
 5         <title>商品信息</title>
 6         <link rel="stylesheet" type="text/css" href="flexigrid_my/css/flexigrid_blue.css">
 7         <link rel="stylesheet" type="text/css" href="flexigrid_my/jqModal/css/jqModal_blue.css">
 8         <script type="text/javascript" src="flexigrid_my/jquery-1.3.2.min.js"></script>
 9         <script type="text/javascript" src="flexigrid_my/flexigrid.js"></script>
10         <script type="text/javascript" src="flexigrid_my/jqModal/dimensions.js"></script>
11         <script type="text/javascript" src="flexigrid_my/jqModal/jqDnR.js"></script>
12         <script type="text/javascript" src="flexigrid_my/jqModal/jqModal.js"></script>
13         <script type="text/javascript" src="flexigrid_my/flex_khjb.js"></script>
14     </head>
15  <body>
16         <table id="flex1" style="display: none"></table>
17         <div class="jqmWindow" style="width: 300px;" id="divType">
18             <div class="drag">
19                 类别信息编辑
20                 <div class="close"></div>
21             </div>
22             <form id="saveType" method="post">
23                 <table width="252" border="0" align="center"
24                     cellpadding="0" cellspacing="0">
25                     <tr>
26                         <td>ID号：</td>
27                         <td><input type="text" name="jbid" ></td>
28                     </tr>
29                     <tr>
30                         <td>分类名称：</td>
31                         <td><input type="text" name="jbmc"></td>
32                     </tr>
33                     <tr>
34                         <td>数量：</td>
35                         <td><input type="text" name="ywl"></td>
36                     </tr>
37                 </table>
38                 <div align="center">
39                     <input type="button" id="submit" class="input-button" value="提交" />
40                     <input type="reset" class="input-button" value="重置" />
41                 </div>
42             </form>
43         </div>
44         <div class="jqmWindow" style="width: 300px;" id="findType">
45             <div class="drag">
46                 类别查询
47                 <div class="close"></div>
48             </div>
49             <form id="findTypefrm" method="post">
50                 <table width="252" border="0" align="center"
51                     cellpadding="0" cellspacing="0">
52                     <tr>
53                         <td>分类名称：</td>
54                         <td><input type="text" name="findtypemc"></td>
55                     </tr>
56                     <tr>
57                         <td>数量：</td>
58                         <td><input type="text" name="findywl"></td>
59                     </tr>
60                     
61                 </table>
62                 <div align="center">
63                     <input type="button" id="Findsubmit" class="input-button" value="提交" />
64                     <input type="reset" class="input-button" value="重置" />
65                 </div>
66             </form>
67         </div>
68     </body>
69 </HTML>

2.flex_khjb.js

  1 $(function() {
  2         $("#flex1").flexigrid({
  3                 url : 'jsonKhjb.action',
  4                 dataType : 'json',
  5                 colModel : [
  6                         { display : 'ID号',        name : 'jbid',    width : 140, sortable : true,align : 'center'}, 
  7                         { display : '类别名称',    name : 'jbmc',    width : 200,sortable : true,align : 'center'},
  8                         { display : '数量',        name : 'ywl',    width : 200,sortable : true,align : 'center'}
  9                 ],
 10                 height:'auto',
 11                 width: 600,
 12                 buttons : [{
 13                         name : '添加',
 14                         bclass : 'add',
 15                         onpress : action
 16                     }, {
 17                         // 设置分割线
 18                         separator : true
 19                     }, {
 20                         name : '删除',
 21                         bclass : 'delete',
 22                         onpress : action
 23                     }, {
 24                         separator : true
 25                     }, {
 26                         name : '修改',
 27                         bclass : 'edit',
 28                         onpress : action    //action
 29                     }, {
 30                         separator : true
 31                     },{
 32                         name : '查询',
 33                         bclass : 'find',
 34                         onpress : action
 35                     }],
 36                 ///查询///////////////////////   
 37                 /*    
 38                 searchitems : [{
 39                         display : 'ID号',
 40                         name : 'jbid',
 41                         isdefault : true
 42                     }, {
 43                         display : '分类名称',
 44                         name : 'jbmc'
 45                     }],
 46                 */   
 47                 /////////////////////////////    
 48                 sortname : "jbid",
 49                 sortorder : "asc",
 50                 usepager : true,
 51                 title : '类别信息',
 52                 useRp : true,
 53                 checkbox : true,// 是否要多选框
 54                 rowId : 'jbid',// 多选框绑定行的id
 55                 rp : 10,
 56                 showTableToggleBtn : true
 57                
 58                 
 59             });
 60             
 61         
 62         var actions="";
 63         function action(com, grid) {
 64             //alert(com);
 65             switch (com) {
 66                 case '添加' :
 67                     $("#saveType input[type='text']").each(function() {    
 68                             $(this).val("");    //清空
 69                         });
 70                      //$('#saveType input[name="jbid"]').removeAttr("readonly");
 71                      $('#saveType').attr("action","addType.action");
 72                     actions="addType.action";
 73                     $("#divType").jqmShow();
 74                     break;
 75                 case '修改' :
 76                     selected_count = $('.trSelected', grid).length;
 77                     if (selected_count == 0) {
 78                         alert('请选择一条记录!');
 79                         return;
 80                     }
 81                     if (selected_count > 1) {
 82                         alert('抱歉只能同时修改一条记录!');
 83                         return;
 84                     }
 85                     data = new Array();
 86                     $('.trSelected td', grid).each(function(i) {
 87                             data[i] = $(this).children('div').text();
 88                         });
 89                     alert("data: "+data);
 90                     $('#saveType input[name="jbid"]').val(data[0]).attr("readonly","readonly");
 91                     $('#saveType input[name="jbmc"]').val(data[1]);
 92                     $('#saveType input[name="ywl"]').val(data[2]);
 93                     actions="modifyType.action";
 94 
 95                     break;
 96                 case '删除' :
 97                     selected_count = $('.trSelected', grid).length;
 98                     if (selected_count == 0) {
 99                         alert('请选择一条记录!');
100                         return;
101                     }
102                     names = '';
103                     $('.trSelected td:nth-child(3) div', grid).each(function(i) {
104                             if (i)
105                                 names += ',';
106                             names += $(this).text();
107                         });
108                     ids = '';
109                     $('.trSelected td:nth-child(2) div', grid).each(function(i) {
110                             if (i)
111                                 ids += ',';
112                             ids += $(this).text();
113                         })
114                     if (confirm("确定删除商品编号为：[" + names + "]?")) {
115                         delUser(ids);
116                     }
117                     break;
118                    
119                    case '查询' :
120                        //alert("find-----");
121                        actions="jsonKhjb.action";
122                        //$("#findType").css("display","block");
123                        $("#findType").jqmShow();
124                        break;
125             }
126         }
127         $("#divType").jqm({
128             // trigger : 'a.showDialog',// 触发
129             // ajax: '@href',//ajax读取方式
130             // ajaxText:'',//提示语言
131             modal : true,// 限制输入（鼠标点击，按键）的对话
132             overlay : 30 // 遮罩程度%
133               // target : t,// 提示
134               // onHide : function(h) {
135               // // // t.html('Please Wait...'); // Clear Content HTML on Hide.
136               // h.o.remove(); // remove overlay
137               // // h.w.fadeOut(888); // hide window
138               // }
139           }).jqmAddClose('.close')// 添加触发关闭的selector
140           .jqDrag('.drag');// 添加拖拽的selector
141         
142           
143         $("#findType").jqm({
144             modal : true,// 限制输入（鼠标点击，按键）的对话
145             overlay : 30 // 遮罩程度%
146           }).jqmAddClose('.close')// 添加触发关闭的selector
147           .jqDrag('.drag');// 添加拖拽的selector  
148           
149         function delUser(ids) {
150             $.ajax({
151                     url : 'delType.action',
152                     data : {
153                         ids : ids
154                     },
155                     type : 'POST',
156                     dataType : 'html',
157                     success : function() {
158                         alert("删除成功!");
159                         $('#flex1').flexReload();//表格重载
160                     }
161                 });
162         }
163         $("#submit").click(function(){
164              if($('#saveType input[name="jbid"]').val() == "" ||
165                          $('#saveType input[name="jbmc"]').val() == "" ||
166                          $('#saveType input[name="ywl"]').val() == "" ){
167                              
168                  alert("请输入内容，不能为空!");
169              }else{
170                      $.ajax({
171                     url : actions,
172                     data : $("#saveType").serialize(),
173                     type : 'POST',
174                     dataType : 'html',
175                     success : function(data) {
176                         alert("添加成功!");
177                         $("#divType").jqmHide();
178                         $('#flex1').flexReload();
179                     }
180                 });
181              }
182         });
183        
184         $("#Findsubmit").click(function(){
185             var typename = $("#findTypefrm input[name=findtypemc]").val();
186             //alert(typename);
187             var params = [{"name" : "findtypemc","value" : typename }];
188             $("#findType").jqmHide();
189             $('#flex1').flexOptions({params : params, newp : 1}).flexReload();
190         
191         });
192     });

 

 

 

posted @ 2012-11-17 21:19  银在天下  阅读(2399)  评论(0)    收藏  举报