一丶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: '学生图片', 320, height: 100, align: 'left', 28 formatter: function (value, rec) {//使用formatter格式化刷子 29 return "<img src=" + value + " style='320px;height:100px;'/>"; 30 } 31 }, 32 { field: 'name', title: '学生名', 150 }, 33 { field: 'sex', title: '性别', 150 }, 34 { field: 'age', title: '年龄', 150 }, 35 { 36 title: '操作日期', field: 'stuAddTime', align: 'center', 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: '宿舍地址', 200 }, 44 { 45 title: '上传图片日期', field: 'addTime', align: 'center', 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 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 });
二丶功能区
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 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 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 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 },