实现的功能：
1、添加数据
2、编辑数据
3、删除数据
4、搜索数据
5、分页功能
6、行双击事件
7、鼠标右键菜单
8、复选框，批量删除
效果图：
源码:
<%--
Created by IntelliJ IDEA.
User: TNT
Date: 2014/12/15
Time: 16:31
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="./easyui1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="./easyui1.4.1/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="./easyui1.4.1/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="./easyui1.4.1/themes/icon.css" />
<script src="./easyui1.4.1/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#win').dialog('close');
//创建一个grid
var datagrid = $('#datagrid').datagrid({
url:"testCm!listTest.action",
fit:true,//自动填充满
border:false,//去除边框
pagination:true,//分页栏
pageSize:20,//默认选择项
pageList:[10,20,50,100],//下拉框数值
rownumbers:true,//是否显示行号
fitColumns:false,//是否让浏览器自动控制列宽
idField:'id',//多选时，通过row记录行号
singleSelect:false,//是否单选
selectOnCheck:true,
checkOnSelect:true,
toolbar:"#toolbar",//工具栏调用
loadMsg:'正在加载数据..',
//列模型
columns:[[
//{field:'row',checkbox:true},
{field:'id',title:'ID',width:180,align:'center',checkbox:true},
{field:'passtime',title:'Passtime',width:130,align:'center',sortable:true,
formatter:function(value,rowData,rowIndex){
var Timestamp = new Date(value).toLocaleDateString();//将时间格式转换成本地格式
return Timestamp;
}
},
{field:'cpys',title:'cpys',width:80,align:'center'},
{field:'cphm',title:'cphm',width:80,align:'center'},
{field:'csys',title:'csys',width:80,align:'center'},
{field:'ckFlag',title:'ckFlag',width:80,align:'center',
formatter:function(value){
if(value) return "<font color='green'>通过</font>";//格式化内容，true->通过，false->禁止，并配上颜色
else return "<font color='red'>禁止</font>";
}}
]],
//双击事件
'onDblClickRow':function (Index, row){
editUser();
},
// 鼠标右键
'onRowContextMenu':function(e, index, row){
e.preventDefault();//取消事件的默认行为
var selected=$("#datagrid").datagrid('getRows'); //获取所有行集合对象
selected[index].id; //index为当前右键行的索引，指向当前行对象
$('#mn').menu('show', {//定位右键菜单打开的位置
left:e.pageX,
top:e.pageY
});
}
});
});
//添加/编辑的标志位，用于选择提交的url
var subflag;
//添加数据
var newUser = function(){
subflag = true;
$('#win').dialog('open').dialog('setTitle','新建数据');//打开dialog窗口
$('#ff').form('clear');//清空form表单的数据
};
//编辑数据
var editUser = function(){
subflag = false;
var row = $("#datagrid").datagrid("getChecked");//获取勾选的数据
if (row.length == 1) {
$("#win").dialog("open").dialog('setTitle','编辑数据');
$("#ff").form("load", {
//数据绑定
"testCm.id":row[0].id,
"testCm.cphm":row[0].cphm,
"testCm.cpys":row[0].cpys,
"testCm.csys":row[0].csys,
"testCm.passtime":new Date(row[0].passtime).toLocaleDateString(),
"testCm.ckFlag":row[0].ckFlag
});
}else{
alert('请只勾选一条数据');
}
};
//删除数据
var destroyUser = function(){
var row = $("#datagrid").datagrid("getChecked");
if(row.length > 0){//判断是否勾选数据
var ids = '';
for(var i=0;i<row.length;i++){//组合勾选的id
ids += row[i].id+',';
};
$('#ff').form('submit', {
url:"testCm!deleteTest.action?testCm.id="+ids,
onSubmit: function(){
},
success:function(data){
var data = eval('(' + data + ')');
if(data.success){
$.messager.show({title:"提示信息", msg:"删除成功",timeout:1200,showType:'slide'});
$('#datagrid').datagrid('load');
}else{
$.messager.alert("提示信息", "删除失败");
}
}
});
}else{
alert('请勾选需要删除的数据..');
}
};
//搜索数据
var searchUser = function(){
var searchText = $('#searchValue').val();
if(searchText == '请输入cphm关键字'){
searchText = '';
}
$('#datagrid').datagrid("load",{
'keyword' : searchText
})
};
// 添加/编辑窗口中的确认按钮操作
var saveUser = function(){
//添加
var url;
if(subflag){
url = "testCm!saveTest.action";
}else{
url = "testCm!updataTest.action";
}
$('#ff').form('submit', {
url:url,
onSubmit: function(){
},
success:function(data){
var data = eval('(' + data + ')');
if(data.success){
$.messager.show({title:"提示信息", msg:"操作成功",timeout:1200,showType:'slide'});
$("#win").dialog("close");
$("#datagrid").datagrid("load");
}else{
$.messager.alert("提示信息", "操作失败");
}
}
});
};
//添加/编辑窗口中的取消按钮操作
var closeUser = function(){
$('#win').dialog('close');
};
</script>
</head>
<body>
<%--创建一个grid--%>
<table id="datagrid"></table>
<%--toolbar工具栏重新实现，easyui自带的工具栏只能添加按钮--%>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="newUser()">New User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="editUser()">Edit User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="destroyUser()">Remove User</a>
<label>搜索:</label>
<input type="text" id="searchValue" style="width:120px;color: #dcdcdc;" value="请输入cphm关键字"
οnfοcus="if(value=='请输入cphm关键字') {value='';}this.style.color='#000';"
οnblur="if (value=='') {value='请输入cphm关键字';this.style.color='#999';}"
/>
<a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true" οnclick="searchUser()">Search User</a>
</div>
<%--添加/编辑窗口，及里面的Form表单--%>
<div id="win" class="easyui-dialog" style="width:330px;height:250px"
data-options="iconCls:'icon-save',modal:true,buttons:[{
text:'保存',
handler:function(){saveUser();}
},{
text:'关闭',
handler:function(){closeUser();}
}]" >
<form id="ff" method="post">
<div style="padding:5px; display: none">
<label style="width:80px;text-align:right;float:left;">id:</label>
<input class="easyui-validatebox" name="testCm.id" style="width:120px;" data-options="required:true" />
</div>
<div style="padding:5px;">
<label style="width:80px;text-align:right;float:left;">passtime:</label>
<input class="easyui-datetimebox" name="testCm.passtime" style="width:120px;" data-options="required:true" />
</div>
<div style="padding:5px;">
<label style="width:80px;text-align:right;float:left;">cphm:</label>
<input class="easyui-validatebox" name="testCm.cphm" style="width:120px;" data-options="required:true" />
</div>
<div style="padding:5px;">
<label style="width:80px;text-align:right;float:left;">cpys:</label>
<input class="easyui-validatebox" name="testCm.cpys" style="width:120px;" data-options="required:true" />
</div>
<div style="padding:5px;">
<label style="width:80px;text-align:right;float:left;">csys:</label>
<input class="easyui-validatebox" name="testCm.csys" style="width:120px;" data-options="required:true" />
</div>
<div style="padding:5px;">
<label style="width:80px;text-align:right;float:left;">ckFlag:</label>
<select class="easyui-combobox" name="testCm.ckFlag" style="width:120px;" data-options="required:true">
<option>true</option>
<option>false</option>
</select>
</div>
</form>
</div>
<div id="mn" class="easyui-menu" style="width:120px;">
<div onClick="newUser()" data-options="iconCls:'icon-add'">新增</div>
<div onClick="editUser()" data-options="iconCls:'icon-edit'">编辑</div>
<div onClick="destroyUser()" data-options="iconCls:'icon-remove'">删除</div>
<div class="menu-sep"></div>
<div onClick=$("#datagrid").datagrid("load"); data-options="iconCls:'icon-reload'">刷新</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
