第四节：EasyUI的一些操作

一丶Datagrid

  //1.初始化页面数据
         LoadGrid: function () {
             dgLog = $('#dg').datagrid({
                 url: '/Test_Areas/Test/StuList',
                 iconCls: 'icon-save',
                 fit: true, // 自动适应父容器大小
                 idField: 'id', //标识字段
                 loadMsg: '请稍等，正在拼命加载...',
                 fitColumns: false,//防止水平滚动
                 rownumbers: true, //是否加行号
                 pagination: true, //是否显式分页
                 pageSize: 5, //页容量，必须和pageList对应起来，否则会报错
                 pageNumber: 1, //默认显示第几页
                 pageList: [5, 10, 15],//分页中下拉选项的数值
                 checkOnSelect: true,
                 selectOnCheck: true,
                 //固定列
                 frozenColumns: [[
                     {
                         field: 'id', title: '请选择..', align: 'center', checkbox: true
                     },
                 ]],
                 //非固定列
                 columns: [[

                      {
                          field: 'photoUrl', title: '学生图片', width: 320, height: 100, align: 'left',
                          formatter: function (value, rec) {//使用formatter格式化刷子
                              return "<img src=" + value + " style='width:320px;height:100px;'/>";
                          }
                      },
                     { field: 'name', title: '学生名', width: 150 },
                     { field: 'sex', title: '性别', width: 150 },
                     { field: 'age', title: '年龄', width: 150 },
                     {
                         title: '操作日期', field: 'stuAddTime', align: 'center', width: 300,
                         formatter: function (value) {
                             if (value) {
                                 return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-MM-dd HH:mm:ss");
                             }
                         }
                     },
                     { field: 'roomNumber', title: '宿舍地址', width: 200 },
                     {
                         title: '上传图片日期', field: 'addTime', align: 'center', width: 300,
                         formatter: function (value) {
                             if (value) {
                                 return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-MM-dd HH:mm:ss");
                             }
                         }
                     },

                 ]],
                 //导航栏('-')表示'|'分隔符
                 toolbar: [{
                     text: '刷新',
                     iconCls: 'fa fa-refresh',
                     handler: function () {
                         pageUtil.Refresh();
                     }
                 }
                  ,
                   '-', {
                       text: '取消选中',
                       iconCls: 'fa fa-undo',
                       handler: function () {
                           pageUtil.CancelSelected();
                       }
                   },
                    '-', {
                        text: '添加',
                        iconCls: 'fa fa-plus',
                        handler: function () {
                            pageUtil.AddStudent();
                        }

                    },
                    '-', {
                        text: '编辑',
                        iconCls: 'fa fa-edit',
                        handler: function () {
                            pageUtil.EditStudent();
                        }

                    },
                   '-', {
                       text: '删除',
                       iconCls: 'fa fa-remove',
                       handler: function () {
                           pageUtil.DelStudent();
                       }

                   },
                 ],
                 //单击图片
                 onClickCell: function (index, field, value) {
                     if (field == "photoUrl") {
                         var Photo_Dialog = $("#j_photoView").dialog({
                             title: "图片显示",
                             width: 500,
                             height: 450,
                             href: '/Test_Areas/Test/Photo_View',
                             onLoad: function () {
                                 $("#j_photo").attr("src", value);
                             },
                             buttons: [{
                                 text: '关闭',
                                 handler: function () {
                                     Photo_Dialog.dialog("close");
                                 },
                             }],
                         });
                     }

                 },
                 onLoadError: function (data) {
                     if (data == "error") {
                         alert("查询发生异常，请及时联系管理员！");
                     }
                 },

             });

二丶功能区

 //2.刷新
         Refresh: function () {
             dgLog.datagrid('load');
         },
         //3.取消选中
         CancelSelected: function () {
             dgLog.datagrid('unselectAll');
         },
         //4.增加
         AddStudent: function () {
             var addForm = $("#j_addStu").dialog({
                 title: "新添学生",
                 width: 500,
                 height: 450,
                 href: '/Test_Areas/Test/Add_View',
                 buttons: [{
                     text: '保存',
                     handler: function () {
                         var AddStudent_Form = $("#addForm");
                         //$.ajax({
                         //    type: 'POST',
                         //    url: '/Test_Areas/Test/Demo',
                         //    data: xz.serializeObject(AddStudent_Form),
                         //    dataType: 'JSON',
                         //    success: function (data) {
                         //        if (data == 'ok') {
                         //            $.messager.alert('success', '插入成功！');
                         //            $('#j_addStu').dialog('close');
                         //            $('#dg').datagrid('reload');
                         //        } else {
                         //            $.messager.alert('Error', '插入失败！');
                         //        }
                         //    }
                         //});

                         //是一个验证表单的功能。当validate()这个函数返回值是true的时候，表单提交，反之则不提交。
                         $("#addForm").form('submit', {
                             url: '/Test_Areas/Test/AddExcute',
                             onSubmit: function () {
                                 return $(this).form('validate');
                             },
                             success: function (data) {
                                 if (data == 'ok') {
                                     $.messager.alert('success', '插入成功！');
                                     $('#j_addStu').dialog('close');
                                     $('#dg').datagrid('reload');
                                 } else {
                                     $.messager.alert('Error', '插入失败！');
                                 }
                             }
                         });
                     }
                 }, {
                     text: '关闭',
                     handler: function () {
                         $('#j_addStu').dialog('close');
                     }
                 }],
                 onLoad: function () {
                     //上传图片
                     $("#j_btn").uploadify({
                         buttonText: '上传图片',
                         height: 20,
                         width: 120,
                         swf: '/Content/uploadify/uploadify.swf',
                         uploader: '/Test_Areas/Test/Upload',//通过后台的程序把文件上传到服务器
                         multi: false,//是否允许同时选择多个文件
                         fileSizeLimit: '8MB',//文件大小
                         fileTypeExts: '*.gif;*.png;*.jpg;*jpeg',//可选文件的扩展名
                         formData: {
                             'folder': '/Upload', 'ASPSESSID': ASPSESSID, 'AUTHID': auth//测试
                         },
                         onUploadSuccess: function (file, data, response) {
                             var jsonData = $.parseJSON(data);
                             $.procAjaxMsg(jsonData, function () {
                                 $.alertMsg(jsonData.Msg, '操作提示', function () {

                                     $("#addForm img").attr("src", jsonData.BackUrl);
                                     $("#j_ImgUrl1").val(jsonData.BackUrl);

                                 });
                             }, function () {
                                 $.alertMsg(jsonData.Msg, '操作提示', null);
                             });
                         },
                         onUploadError: function (file, errorCode, errorMsg, errorString) {
                             $.alertMsg('文件 ' + file.name + ' 上传失败: ' + errorString, '上传失败', null);
                         },
                         onSelectError: function (file, errorCode, errorMsg, errorString) {
                             $.alertMsg('文件 ' + file.name + ' 不能被上传: ' + errorString, '选择失效', null);
                         }
                     })
                 }
             });
         },
         //5.编辑
         EditStudent: function () {
             var rows = dgLog.datagrid('getSelections');

             if (rows.length > 1) {
                 $.messager.alert("错误提示", "不能同时修改多个学生信息！");
             } else if (rows.length == 1) {
                 var pEdit = $("#j_edittbStuDialog").dialog({
                     title: "修改学生信息",
                     width: 700,
                     height: 450,
                     href: "/Test_Areas/Test/Update_View",
                     buttons: [{
                         text: '保存',
                         handler: function () {
                             $("#j_editForm").form('submit', {
                                 url: "/Test_Areas/Test/UpdateExcute",
                                 onSubmit: function () {
                                     return $(this).form('validate');
                                 },
                                 success: function (data) {
                                     if (data == 'ok') {
                                         $.messager.alert('success', '修改成功！');
                                         pEdit.dialog('close');
                                         dgLog.datagrid('reload');
                                     } else {
                                         $.messager.alert('Error', '修改成功！');
                                     }
                                 }
                             });
                         }
                     }, {
                         text: '关闭',
                         handler: function () {
                             pEdit.dialog('close');
                         }
                     }],
                     onLoad: function () {
                         var row = rows[0];
                         pEdit.find("#j_editForm").form('load', {
                             name: row.name,
                             sex: row.sex,
                             age: row.age,
                             photoUrl: row.photoUrl,
                             roomNumber: row.roomNumber,
                             id: row.id,
                             pId: row.pId,
                         });
                         $("#j_editForm img").attr("src", row.photoUrl);

                     }

                 });

             } else {
                 $.messager.alert("提示", "您没有选中任何行！");
             }
         },
         //6.删除
         DelStudent: function () {
             var rows = dgLog.datagrid('getSelections');
             if (rows.length > 0) {
                 //id字符串
                 var idsStr = "";
                 for (var i = 0; i < rows.length; i++) {
                     idsStr = idsStr + rows[i].id + ",";
                 }
                 if (idsStr.length > 0) {
                     idsStr = idsStr.substr(0, idsStr.length - 1);
                 }
                 $.messager.confirm('删除提示', '确定要删除吗', function (result) {
                     if (result) {
                         $.post('/Test_Areas/Test/DelExcute', { "idsStr": idsStr }, function (data, status) {

                             if (data == "ok") {
                                 $.messager.alert('success', '删除成功！');
                                 dgLog.datagrid('reload');
                                 dgLog.datagrid("unselectAll");
                             } else {
                                 $.messager.alert('success', '删除失败！');
                             }
                         });
                     }
                 });
             }
             else {
                 $.messager.alert("提示", "您没有选中任何行！");
             }
         },
         //7.条件检索---清空
         ClearSearch: function () {
             dgLog.datagrid('load', {});
             searchForm.find('input').val('');
         },
         //8.多条件查询
         SearchFilter: function () {
             dateStart = $("#j_dateStart").datebox("getValue");
             dateEnd = $("#j_dateEnd").datebox("getValue");
             name = $("#j_name").val();
             sex = $("#j_sex").val();
             roomNumber = $("#j_roomNumber").val();
             if (dateStart != "" && dateEnd != "" && dateStart > dateEnd) {
                 alert("起始时间不能大于结束时间，请重新输入");
                 return;
             }
             //传值
             dgLog.datagrid('load', {
                 dateStart: dateStart,
                 dateEnd: dateEnd,
                 name: name,
                 sex: sex,
                 roomNumber: roomNumber,
             })
         },
         //9.进行以Excel的方式进行导出
         DownLoad: function () {
             dateStart = $("#j_dateStart").datebox("getValue");
             dateEnd = $("#j_dateEnd").datebox("getValue");
             name = $("#j_name").val();
             sex = $("#j_sex").val();
             roomNumber = $("#j_roomNumber").val();
             window.location.href = "/Test_Areas/Test/DownLoadExcel?dateStart=" + dateStart + "&dateEnd=" + dateEnd + "&name=" + name + "&sex=" + sex + "&roomNumber=" + roomNumber;
         },