第四节：EasyUI的一些操作
2024-08-30 23:09:33
一丶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;
},
最新文章
- 解决NSTimer存在的内存泄漏的问题
- JS获取URL地址参数
- Today I learnt
- JDBC简介及编码步骤
- Jmeter 检查点
- ubuntu sh脚本双击运行
- 使用Jquery Mobile设计Android通讯录
- DELPHI关于文件的操作
- Oracle建表插数据等等
- 技术之美[程序人生]我在IBM实习的日子
- ASP.NET中ListBox控件的使用
- Spring基础系列-AOP源码分析
- queryset优化 。。。。。exists()与iterator()方法
- windows server 2016 安装iis
- jQuery中的end()方法
- 转自《https安全链接的配置教程：startSSl免费证书申请与nginx的https支持配置》
- 10个在UNIX或Linux终端上快速工作的建议
- WCF 服务应用程序与 服务库之间的区别
- easyui datagrid编辑
- handsontable-cell type