1.掌握datagrid的创建方式在html中直接定义与在js中定义
可参考easyui的官方文档：http://www.jeasyui.net/plugins/183.html
2.实现代码如下：重点掌握数据域的属性，事件，列的属性，事件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="renderer" content="webkit">
<!-- TopJUI框架样式 -->
<link type="text/css" href="../UIFrame/topjui/css/topjui.core.min.css" rel="stylesheet">
<link type="text/css" href="../UIFrame/topjui/themes/default/topjui.bluelight.css" rel="stylesheet" id="dynamicTheme"/>
<!-- FontAwesome字体图标 -->
<link type="text/css" href="../UIFrame/static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
<!-- layui框架样式 -->
<link type="text/css" href="../UIFrame/static/plugins/layui/css/layui.css" rel="stylesheet"/>
<!-- jQuery相关引用 -->
<script type="text/javascript" src="../UIFrame/static/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../UIFrame/static/plugins/jquery/jquery.cookie.js"></script>
<!-- TopJUI框架配置 -->
<script type="text/javascript" src="../UIFrame/static/public/js/topjui.config.js"></script>
<!-- TopJUI框架核心-->
<script type="text/javascript" src="../UIFrame/topjui/js/topjui.core.min.js"></script>
<!-- TopJUI中文支持 -->
<script type="text/javascript" src="../UIFrame/topjui/js/locale/topjui.lang.zh_CN.js"></script>
<!-- layui框架js -->
<script type="text/javascript" src="../UIFrame/static/plugins/layui/layui.js" charset="utf-8"></script>
<!-- test功能模块对应的js，存放与根目录JS下 -->
<script type="text/javascript" src="../js/test.js" charset="utf-8"></script>
</head>
<body>
<!-- 所有与此ID相关的DGrid进行替换，以模块名称进行相应的命名 -->
<table id="testDg"></table>
<!-- 表格工具栏开始 -->
<div id="testDg-toolbar" class="topjui-toolbar"
data-options="grid:{
type:'datagrid',
id:'testDg'
}">
<a id="add" href="javascript:void(0)">添加数据</a>
<a id="edit" href="javascript:void(0)">修改数据</a>
<a id="delete" href="javascript:void(0)">删除数据</a>
<a id="search" href="javascript:void(0)">综合查询</a>
<a id="import" href="javascript:void(0)">数据导入</a>
<a id="export" href="javascript:void(0)">数据导出</a>
<a id="analyse" href="javascript:void(0)">统计分析</a>
<a id="report" href="javascript:void(0)">报表打印</a>
<form id="queryForm" class="search-box">
<input type="text" name="username" data-toggle="topjui-textbox"
data-options="id:'username',prompt:'用户名',width:100">
<a id="queryBtn" href="javascript:void(0)">查询</a>
</form>
</div>
<!-- 表格工具栏结束 -->
<!-- 表格行编辑窗口 -->
<form id="editDialog"></form>
<input type="hidden" name="sss" id="sss" data-toggle="topjui-textbox">
</body>
</html>
/**
* 单元格内容以进度条进行格式化显示
*/
function progressFormatter(value, rowData, rowIndex) {
var htmlstr = '<div id="p" class="topjui-progressbar progressbar" data-options="value:' + value + '" style="width: 398px; height: 26px;">';
htmlstr += '<div class="progressbar-text" style="width: 398px; height: 26px; line-height: 26px;">' + value + '%</div>';
htmlstr += '<div class="progressbar-value" style="width: ' + value + '%; height: 26px; line-height: 26px;">';
htmlstr += '<div class="progressbar-text" style="width: 398px; height: 26px; line-height: 26px;">' + value + '%</div>';
htmlstr += '</div>';
htmlstr += '</div>';
return htmlstr;
}
/**
* 单元格内容进行格式化操作
*/
function operateFormatter(value, row, index) {
var htmlstr = '<button class="layui-btn layui-btn-xs" οnclick="openEditDiag(\'' + row.uuid + '\')">编辑</button>';
htmlstr += '<button class="layui-btn layui-btn-xs layui-btn-danger" οnclick="deleteRow(\'' + row.uuid + '\')">删除</button>';
return htmlstr;
}
/**
* 以主键进行数据修改操作
*/
function openEditDiag(uuid) {
//创建form表单
var $editDialog = $('<form></form>'); // $('#editDialog')用这个查找不能二次打开
$editDialog.iDialog({
title: '修改数据示例A',
width: 950,
height: 500,
closed: false,
cache: false,
collapsible: 0,
resizable : 0, //定义是否可以调整对话框的大小
iconCls: 'fa fa-pencil',
maximizable : 0,
href: 'indexDatail.html' ,//数据回显
modal: true, //设置为模式窗口，窗口外的其他元素不能够点击
buttons: [{
text: '保存',
iconCls: 'fa fa-save',
btnCls: 'topjui-btn-blue',
handler: function () { //保存按键AJAX处理
var formData = $editDialog.serializeArray(); //进行序列化操作，返回json数组
jQuery.ajax({
type: 'POST', //请求方式
url:"indexHandle.jsp?flags=update",
dataType: "json", //预期服务器返回的数据类型
contentType: "application/x-www-form-urlencoded;charset=UTF-8", //返回给服务器时候的字符编码
data: formData, //发送到服务器上的数据
success: function (data) {
showMessage(data);
if (data.statusCode == 200){ //修改成功的状态码为200
$editDialog.iDialog('close'); //关闭对话框
$('#testDg').iDatagrid('reload'); //数据表格重新加载一遍
}
},
error: function (data) {
}
});
}
}, {
text: '关闭',
iconCls: 'fa fa-close',
btnCls: 'topjui-btn-red',
handler: function () {
$editDialog.iDialog('close');
}
}],
onLoad: function () { //在dialog给文本框打开的时候给文本框赋值
//加载表单数据
$.getJSON('indexHandle.jsp?flags=detail&uuid=' + uuid, function (data) {
$editDialog.form('load', data);
});
}
});
}
/**
* 以主键方式对数据进行删除操作
*/
function deleteRow(uuid) {
$.iMessager.confirm('操作提示', '所选择的数据一经删除将不可恢复，是否确认进行此操作？', function(r) {
if(r){
//异步提交删除数据
$.ajax({
type: 'POST',
url:"indexHandle.jsp?flags=delete",
dataType: "json",
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
data: {"uuid":uuid}, //构建主键
success: function (data) {
showMessage(data);
if (data.statusCode == 200){ //操作成功重载数据
$('#testDg').iDatagrid('reload');
}
},
error: function (data) {//错误处理
}
});
}
});
}
$(function () {
var testDg = {
type: 'datagrid',
id: 'testDg'
};
$("#testDg").iDatagrid({
selectOnCheck:true,
checkOnSelect:true,
nowrap: true,
queryParams: { 'ss': ''},// $("#ss").textbox('getValue') },
url: 'indexHandle.jsp?flags=query', //所需要加载的数据列表
columns: [[
{field: 'uuid', title: 'UUID', checkbox: true},
{field: 'username', title: '用户名', sortable: true, width:100},
{field: 'password', title: '用户密码', sortable: true, width:100},
{field: 'sex', title: '性别', sortable: false, width:100, align:'center'},
{field: 'age', title: '年龄', sortable: false, width:100, align:'right'},
{field: 'education', title: '学历', sortable: true, width:100},
{field: 'address', title: '地址', sortable: false, width:200},
{field: 'handle', title: '操作', sortable: false, formatter: operateFormatter, width:100, align:'center'}
]],
filter: [{
field: 'username',
type: 'textbox',
op: ['contains', 'equal', 'notequal', 'less', 'greater']//过滤操作
}, {
field: 'sex',
type: 'combobox',
options: {
valueField: 'label',
textField: 'value',
data: [{
label: '男',
value: '男'
}, {
label: '女',
value: '女'
}]
},
op: ['contains', 'equal', 'notequal']
}, {
field: 'age',
type: 'textbox',
op: ['equal', 'less', 'greater']
}],
onBeforeLoad: function (param) {
param.ss = $("#sss").textbox('getText');
},
onLoadSuccess:function(data){
$("#sss").textbox("setValue", $.cookie('_SQLSTRING'));
}
});
$("#add").iMenubutton({
method: 'openDialog',
extend: '#testDg-toolbar', //继承按钮
iconCls: 'fa fa-file-text-o', //按钮图标
btnCls: 'topjui-btn-brown', //按钮样式
width: 90,
dialog: {
id: 'userAddDialog',
iconCls: 'fa fa-file-text-o',
title: '添加数据示例',
href: 'indexDatail.html',
collapsible: 0, //定义是否可以折叠
resizable : 0, //定义对话框是否可以调整大小
maximizable : 0, //定义是否显示最大化按钮
buttonsGroup: [ //按钮组
{
text: '添加',
url: 'indexHandle.jsp?flags=add',
iconCls: 'fa fa-file-text-o',
handler: 'ajaxForm',
btnCls: 'topjui-btn-brown'
}
]
}
});
$("#edit").iMenubutton({
method: 'openDialog',
extend: '#testDg-toolbar',
iconCls: 'fa fa-pencil',
btnCls: 'topjui-btn-green',
width: 90,
grid: testDg,
dialog: {
title: '修改数据示例',
iconCls: 'fa fa-pencil',
href: 'indexDatail.html',
url: 'indexHandle.jsp?flags=detail&uuid={uuid}', //数据回显
collapsible: 0,
resizable : 0,
maximizable : 0,
buttonsGroup: [
{
text: '修改',
url: 'indexHandle.jsp?flags=update',
iconCls: 'fa fa-pencil',
handler: 'ajaxForm',
btnCls: 'topjui-btn-green'
}
]
}
});
$("#delete").iMenubutton({
method: 'doAjax',
extend: '#testDg-toolbar',
iconCls: 'fa fa-trash',
btnCls: 'topjui-btn-red',
width: 90,
confirmMsg: '所选择的数据一经删除将不可恢复，是否确认进行此操作？',//提示信息
grid: {
type: 'datagrid',
id: 'testDg',
uncheckedMsg: '请先选择要删除的数据后进行此操作！',
param: 'uuid:uuid'
},
url: 'indexHandle.jsp?flags=delete'
});
$("#search").iMenubutton({
method: 'search',
extend: '#testDg-toolbar',
btnCls: 'topjui-btn-blue',
width: 90,
grid: testDg
});
$("#import").iMenubutton({
method: 'openDialog',
extend: '#testDg-toolbar',
iconCls: 'fa fa-cloud-upload',
btnCls: 'topjui-btn-purple',
width: 90,
grid: testDg,
dialog: {
title: '数据导入',
href: '../common/import.html',
height:600,
collapsible: 0,
iconCls: 'fa fa-cloud-upload',
resizable : 0,
maximizable : 0,
buttonsGroup: [
{
id: 'btnImport',
text: '数据导入',
disabled: 1,
url: 'indexHandle.jsp?flags=import',
iconCls: 'fa fa-cloud-upload',
handler: 'ajaxForm',
btnCls: 'topjui-btn-purple'
}
]
}
});
$("#export").iMenubutton({
method: 'export',
extend: '#testDg-toolbar',
btnCls: 'topjui-btn-purple',
width: 90,
grid: {
type: 'datagrid',
id: 'testDg',
},
url: 'indexHandle.jsp?flags=export'
});
$("#analyse").iMenubutton({
extend: '#testDg-toolbar',
btnCls: 'topjui-btn-black',
iconCls: 'fa fa-bar-chart',
width: 90,
onClick: analyseShow
});
$("#report").iMenubutton({
extend: '#testDg-toolbar',
btnCls: 'topjui-btn-black',
iconCls: 'fa fa-file-word-o',
width: 90,
onClick: function () {
jQuery.ajax({
type: 'POST',
cache : false,
dataType : "json",
async : false,
url:"indexHandle.jsp?flags=report",
success: function (data) {
showMessage(data);
},
error: function (data) {
}
});
}
});
$('#queryBtn').iMenubutton({
method: 'query',
iconCls: 'fa fa-search',
btnCls: 'topjui-btn-blue',
form: {id: 'queryForm'},
grid: {type: 'datagrid', 'id': 'testDg'}
});
});
// 自定义统计分析
function analyseShow() {
var $editDialog = $('<form></form>'); // $('#editDialog')用这个查找不能二次打开
$editDialog.iDialog({
title: '统计分析示例',
width: 800,
height: 550,
closed: false,
cache: false,
iconCls: 'fa fa-bar-chart',
collapsible: 0,
resizable : 0,
maximizable : 1,
href:'line.html',//href: 'indexHandle.jsp?flags=report&ss=' + $("#sss").textbox('getText'),//获取查询数据
modal: true,
buttons: [{
text: '关闭',
iconCls: 'fa fa-close',
btnCls: 'topjui-btn-red',
handler: function () {
$editDialog.iDialog('close');
}
}]
});
}
//自定义报表打印
function reportShow() {
var $editDialog = $('<form></form>'); // $('#editDialog')用这个查找不能二次打开
$editDialog.iDialog({
title: '报表打印示例',
iconCls: 'fa fa-file-word-o',
collapsible: 0,
resizable : 0,
maximizable : 1,
href:'indexHandle.jsp?flags=report',//href: 'indexHandle.jsp?flags=report&ss=' + $("#sss").textbox('getText'),//获取查询数据
modal: true,
buttons: [{
text: '关闭',
iconCls: 'fa fa-close',
btnCls: 'topjui-btn-red',
handler: function () {
$editDialog.iDialog('close');
}
}]
});
}