Let's go

第四节：EasyUI的一些操作

一丶Datagrid

  1  //1.初始化页面数据
  2         LoadGrid: function () {
  3             dgLog = $('#dg').datagrid({
  4                 url: '/Test_Areas/Test/StuList',
  5                 iconCls: 'icon-save',
  6                 fit: true, // 自动适应父容器大小
  7                 idField: 'id', //标识字段
  8                 loadMsg: '请稍等，正在拼命加载...',
  9                 fitColumns: false,//防止水平滚动
 10                 rownumbers: true, //是否加行号
 11                 pagination: true, //是否显式分页
 12                 pageSize: 5, //页容量，必须和pageList对应起来，否则会报错
 13                 pageNumber: 1, //默认显示第几页
 14                 pageList: [5, 10, 15],//分页中下拉选项的数值
 15                 checkOnSelect: true,
 16                 selectOnCheck: true,
 17                 //固定列
 18                 frozenColumns: [[
 19                     {
 20                         field: 'id', title: '请选择..', align: 'center', checkbox: true
 21                     },
 22                 ]],
 23                 //非固定列
 24                 columns: [[
 25 
 26                      {
 27                          field: 'photoUrl', title: '学生图片', width: 320, height: 100, align: 'left',
 28                          formatter: function (value, rec) {//使用formatter格式化刷子
 29                              return "<img src=" + value + " style='width:320px;height:100px;'/>";
 30                          }
 31                      },
 32                     { field: 'name', title: '学生名', width: 150 },
 33                     { field: 'sex', title: '性别', width: 150 },
 34                     { field: 'age', title: '年龄', width: 150 },
 35                     {
 36                         title: '操作日期', field: 'stuAddTime', align: 'center', width: 300,
 37                         formatter: function (value) {
 38                             if (value) {
 39                                 return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-MM-dd HH:mm:ss");
 40                             }
 41                         }
 42                     },
 43                     { field: 'roomNumber', title: '宿舍地址', width: 200 },
 44                     {
 45                         title: '上传图片日期', field: 'addTime', align: 'center', width: 300,
 46                         formatter: function (value) {
 47                             if (value) {
 48                                 return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-MM-dd HH:mm:ss");
 49                             }
 50                         }
 51                     },
 52 
 53                 ]],
 54                 //导航栏('-')表示'|'分隔符
 55                 toolbar: [{
 56                     text: '刷新',
 57                     iconCls: 'fa fa-refresh',
 58                     handler: function () {
 59                         pageUtil.Refresh();
 60                     }
 61                 }
 62                  ,
 63                   '-', {
 64                       text: '取消选中',
 65                       iconCls: 'fa fa-undo',
 66                       handler: function () {
 67                           pageUtil.CancelSelected();
 68                       }
 69                   },
 70                    '-', {
 71                        text: '添加',
 72                        iconCls: 'fa fa-plus',
 73                        handler: function () {
 74                            pageUtil.AddStudent();
 75                        }
 76 
 77                    },
 78                    '-', {
 79                        text: '编辑',
 80                        iconCls: 'fa fa-edit',
 81                        handler: function () {
 82                            pageUtil.EditStudent();
 83                        }
 84 
 85                    },
 86                   '-', {
 87                       text: '删除',
 88                       iconCls: 'fa fa-remove',
 89                       handler: function () {
 90                           pageUtil.DelStudent();
 91                       }
 92 
 93                   },
 94                 ],
 95                 //单击图片
 96                 onClickCell: function (index, field, value) {
 97                     if (field == "photoUrl") {
 98                         var Photo_Dialog = $("#j_photoView").dialog({
 99                             title: "图片显示",
100                             width: 500,
101                             height: 450,
102                             href: '/Test_Areas/Test/Photo_View',
103                             onLoad: function () {
104                                 $("#j_photo").attr("src", value);
105                             },
106                             buttons: [{
107                                 text: '关闭',
108                                 handler: function () {
109                                     Photo_Dialog.dialog("close");
110                                 },
111                             }],
112                         });
113                     }
114 
115 
116                 },
117                 onLoadError: function (data) {
118                     if (data == "error") {
119                         alert("查询发生异常，请及时联系管理员！");
120                     }
121                 },
122 
123             });
View Code

二丶功能区

  1 //2.刷新
  2         Refresh: function () {
  3             dgLog.datagrid('load');
  4         },
  5         //3.取消选中
  6         CancelSelected: function () {
  7             dgLog.datagrid('unselectAll');
  8         },
  9         //4.增加
 10         AddStudent: function () {
 11             var addForm = $("#j_addStu").dialog({
 12                 title: "新添学生",
 13                 width: 500,
 14                 height: 450,
 15                 href: '/Test_Areas/Test/Add_View',
 16                 buttons: [{
 17                     text: '保存',
 18                     handler: function () {
 19                         var AddStudent_Form = $("#addForm");
 20                         //$.ajax({
 21                         //    type: 'POST',
 22                         //    url: '/Test_Areas/Test/Demo',
 23                         //    data: xz.serializeObject(AddStudent_Form),
 24                         //    dataType: 'JSON',
 25                         //    success: function (data) {
 26                         //        if (data == 'ok') {
 27                         //            $.messager.alert('success', '插入成功！');
 28                         //            $('#j_addStu').dialog('close');
 29                         //            $('#dg').datagrid('reload');
 30                         //        } else {
 31                         //            $.messager.alert('Error', '插入失败！');
 32                         //        }
 33                         //    }
 34                         //});
 35     
 36                         //是一个验证表单的功能。当validate()这个函数返回值是true的时候，表单提交，反之则不提交。
 37                         $("#addForm").form('submit', {
 38                             url: '/Test_Areas/Test/AddExcute',
 39                             onSubmit: function () {
 40                                 return $(this).form('validate');
 41                             },
 42                             success: function (data) {
 43                                 if (data == 'ok') {
 44                                     $.messager.alert('success', '插入成功！');
 45                                     $('#j_addStu').dialog('close');
 46                                     $('#dg').datagrid('reload');
 47                                 } else {
 48                                     $.messager.alert('Error', '插入失败！');
 49                                 }
 50                             }
 51                         });
 52                     }
 53                 }, {
 54                     text: '关闭',
 55                     handler: function () {
 56                         $('#j_addStu').dialog('close');
 57                     }
 58                 }],
 59                 onLoad: function () {
 60                     //上传图片
 61                     $("#j_btn").uploadify({
 62                         buttonText: '上传图片',
 63                         height: 20,
 64                         width: 120,
 65                         swf: '/Content/uploadify/uploadify.swf',
 66                         uploader: '/Test_Areas/Test/Upload',//通过后台的程序把文件上传到服务器
 67                         multi: false,//是否允许同时选择多个文件
 68                         fileSizeLimit: '8MB',//文件大小
 69                         fileTypeExts: '*.gif;*.png;*.jpg;*jpeg',//可选文件的扩展名
 70                         formData: {
 71                             'folder': '/Upload', 'ASPSESSID': ASPSESSID, 'AUTHID': auth//测试
 72                         },
 73                         onUploadSuccess: function (file, data, response) {
 74                             var jsonData = $.parseJSON(data);
 75                             $.procAjaxMsg(jsonData, function () {
 76                                 $.alertMsg(jsonData.Msg, '操作提示', function () {
 77 
 78                                     $("#addForm img").attr("src", jsonData.BackUrl);
 79                                     $("#j_ImgUrl1").val(jsonData.BackUrl);
 80 
 81                                 });
 82                             }, function () {
 83                                 $.alertMsg(jsonData.Msg, '操作提示', null);
 84                             });
 85                         },
 86                         onUploadError: function (file, errorCode, errorMsg, errorString) {
 87                             $.alertMsg('文件 ' + file.name + ' 上传失败: ' + errorString, '上传失败', null);
 88                         },
 89                         onSelectError: function (file, errorCode, errorMsg, errorString) {
 90                             $.alertMsg('文件 ' + file.name + ' 不能被上传: ' + errorString, '选择失效', null);
 91                         }
 92                     })
 93                 }
 94             });
 95         },
 96         //5.编辑
 97         EditStudent: function () {
 98             var rows = dgLog.datagrid('getSelections');
 99 
100             if (rows.length > 1) {
101                 $.messager.alert("错误提示", "不能同时修改多个学生信息！");
102             } else if (rows.length == 1) {
103                 var pEdit = $("#j_edittbStuDialog").dialog({
104                     title: "修改学生信息",
105                     width: 700,
106                     height: 450,
107                     href: "/Test_Areas/Test/Update_View",
108                     buttons: [{
109                         text: '保存',
110                         handler: function () {
111                             $("#j_editForm").form('submit', {
112                                 url: "/Test_Areas/Test/UpdateExcute",
113                                 onSubmit: function () {
114                                     return $(this).form('validate');
115                                 },
116                                 success: function (data) {
117                                     if (data == 'ok') {
118                                         $.messager.alert('success', '修改成功！');
119                                         pEdit.dialog('close');
120                                         dgLog.datagrid('reload');
121                                     } else {
122                                         $.messager.alert('Error', '修改成功！');
123                                     }
124                                 }
125                             });
126                         }
127                     }, {
128                         text: '关闭',
129                         handler: function () {
130                             pEdit.dialog('close');
131                         }
132                     }],
133                     onLoad: function () {
134                         var row = rows[0];
135                         pEdit.find("#j_editForm").form('load', {
136                             name: row.name,
137                             sex: row.sex,
138                             age: row.age,
139                             photoUrl: row.photoUrl,
140                             roomNumber: row.roomNumber,
141                             id: row.id,
142                             pId: row.pId,
143                         });
144                         $("#j_editForm img").attr("src", row.photoUrl);
145 
146                     }
147 
148                 });
149 
150             } else {
151                 $.messager.alert("提示", "您没有选中任何行！");
152             }
153         },
154         //6.删除
155         DelStudent: function () {
156             var rows = dgLog.datagrid('getSelections');
157             if (rows.length > 0) {
158                 //id字符串
159                 var idsStr = "";
160                 for (var i = 0; i < rows.length; i++) {
161                     idsStr = idsStr + rows[i].id + ",";
162                 }
163                 if (idsStr.length > 0) {
164                     idsStr = idsStr.substr(0, idsStr.length - 1);
165                 }
166                 $.messager.confirm('删除提示', '确定要删除吗', function (result) {
167                     if (result) {
168                         $.post('/Test_Areas/Test/DelExcute', { "idsStr": idsStr }, function (data, status) {
169 
170                             if (data == "ok") {
171                                 $.messager.alert('success', '删除成功！');
172                                 dgLog.datagrid('reload');
173                                 dgLog.datagrid("unselectAll");
174                             } else {
175                                 $.messager.alert('success', '删除失败！');
176                             }
177                         });
178                     }
179                 });
180             }
181             else {
182                 $.messager.alert("提示", "您没有选中任何行！");
183             }
184         },
185         //7.条件检索---清空
186         ClearSearch: function () {
187             dgLog.datagrid('load', {});
188             searchForm.find('input').val('');
189         },
190         //8.多条件查询
191         SearchFilter: function () {
192             dateStart = $("#j_dateStart").datebox("getValue");
193             dateEnd = $("#j_dateEnd").datebox("getValue");
194             name = $("#j_name").val();
195             sex = $("#j_sex").val();
196             roomNumber = $("#j_roomNumber").val();
197             if (dateStart != "" && dateEnd != "" && dateStart > dateEnd) {
198                 alert("起始时间不能大于结束时间，请重新输入");
199                 return;
200             }
201             //传值
202             dgLog.datagrid('load', {
203                 dateStart: dateStart,
204                 dateEnd: dateEnd,
205                 name: name,
206                 sex: sex,
207                 roomNumber: roomNumber,
208             })
209         },
210         //9.进行以Excel的方式进行导出
211         DownLoad: function () {
212             dateStart = $("#j_dateStart").datebox("getValue");
213             dateEnd = $("#j_dateEnd").datebox("getValue");
214             name = $("#j_name").val();
215             sex = $("#j_sex").val();
216             roomNumber = $("#j_roomNumber").val();
217             window.location.href = "/Test_Areas/Test/DownLoadExcel?dateStart=" + dateStart + "&dateEnd=" + dateEnd + "&name=" + name + "&sex=" + sex + "&roomNumber=" + roomNumber;
218         },
View Code

 

posted @ 2018-07-06 11:40  chenze  阅读(229)  评论(0)  编辑  收藏  举报
有事您Q我