easyui删除数据库数据库数据库数据
❶ 什么是Easyui
一 概述1.easyui是什么？easyui是一个基于jQuery的用户界面插件集合，即easyui主要使用的技术是jQuery，提供的是显示在用户界面的插件。
2.easyui是对HTML插件的扩展，因此使用easyui创建插件要结合对应的HTML插件，比如easyui提供的validatebox extboxfilebox dateboxdatatimebox等必须在<input>标签上实现。
3.data-options用于实例化插件，即为easyui基础插件增加新的特性，新增特性可以集中编写在data-options属性中，属性值用单引号括起来，两个属性间用逗号隔开。新增特性也可以单独列举。
4.每一个插件都可以看做一个容器，添加其他插件，添加方式：通过对应的属性引用其他插件的id，比如添加工具栏toolbar="#toolbar"，添加按钮buttons="#buttons"。
5.调用插件函数的语法格式： $(selector).插件名("方法名"[参数值]); 6.href reload urlhref:静态加载，加载指定页面信息。
reload:动态加载，由事件驱动，比如单击按钮，加载指定页面信息。
url:指向服务器资源，从服务器获取数据。
二 datagrid数据网格 1.作用数据网格主要用于以表格形式显示通过Ajax从数据库获取的数据。
2.服务器返回的json字符串格式： "rows":[{},{}]",total":int数据 3.datagrid建立在HTML的<table>标签之上。
4.datagrid在页面加载完成后，自动通过Ajax从服务器获取数据，需要在实例化插件时给定url。
5.datagrid属性 添加工具栏：toolbar="#toolbar"。
显示行号：rownumbers="true"。
只允许单行选择：singleSelect="true"。
使列适应表的宽度：fitColumns="true":。
显示分页栏：pagination="true"。
6.列标题 <thead> <tr><th field="在此列显示的数据库字段"width="">列标题</th><th field="在此列显示的数据库字段"width="">列标题</th> </tr></thead> 7.获取选择行 var row=$(selector).datagrid("getSelected") row代表选择行，包含id在内的全部数据，数据格式：
{name01:"value01",name02:"value02"} 8.表格中的数据修改以后需要重新加载：$(selector).datagrid("reload");三 form 1.form("clear")：清空表单。
2.加载数据 $(selector).form("load",{name:"myName"});//加载自定义数据
$(selector).form("load",row);//加载datagrid选中行数据 3.表单提交$(selector).form('submit',{
url:xxx,
onSubmit:function(){
return $(this).form("validate")；//验证，只要在前台验证通过后才提交
},
success:function(){}//处理返回结果
}) 如果不需要处理Ajax返回数据，提交可以简写为：
$(selector).form("submit"); 4.使用easyui提交表单后，表单不会自动跳转，如需要跳转，需要在回调函数中设定跳转资源，如window.location.href=""。
❷ jQuery EasyUI- DataGrid使用 从数据库查询得到数据显示在前台的jsp页面，如何实现
1、首先写入导出按钮和需要导出的datagrid列表。
❸ easyUI的表格如何显示数据库里的数据啊
因为EasyUI DataGrid只要取出后台传过来的一定格式的JSON数据，就可以在前台页面数据表格中，以一定形式显示数据库中的数据。此处，我们使用Struts2框架整合DataGrid，实现数据的显示。
一、页面内容
为了在页面中显示数据库中字段内容，需要定义一个table，通过EasyUI内部设计，自动显示数据，如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>房产信息管理</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
</head>
<body>
<table id="housesManage" style="height: 100%"></table>
<div id="addHouse"></div>
<div id="updateHouse"></div>
<script type="text/javascript">
$(document).ready(function(){
//datagrid设置
$('#housesManage').datagrid({
title:'房产列表', //表格标题
iconCls:'icon-list', //表格图标
nowrap: false, //是否只显示一行，即文本过多是否省略部分。
striped: true,
fitColumns:true, //防止水平滚动
scrollbarSize:0, //去掉右侧滚动条列
url:"houses/showHouses!show", //action地址
idField:'id',
collapsible:false,//是否可折叠的
singleSelect:true,//只能单选
frozenColumns:[[
{field:'ck',checkbox:true}
]],
pagination:true, //包含分页
pageSize: 10,
pageList: [10,20,30],//可以设置每页记录条数的列表
rownumbers:true,
singleSelect:true,//只能单选
columns :[[{
field : 'id',
title : 'ID',
align:'center',
hidden : true
},{
field : 'unitNum',
title : "楼栋号",
width : 100,
align:'center',
sortable : true,
},{
field : 'doorCard',
title : "门牌号",
width : 100,
align:'center',
sortable : true,
},{
field : 'roomArea',
title : "房屋面积(平米)",
width : 100,
align:'center',
sortable : true,
},{
field : 'buildTime',
title : "建筑时间",
width : 150,
align:'center',
sortable : true,
},{
field : 'isUse',
title : "使用状态",
width : 80,
align:'center',
sortable : true,
formatter: function(value,row,index){
if(value=="0"){
return '已使用';
}else{
return '<font color="red">空置</font>';
}
}
}]],
toolbar:[{
text:'添加',
iconCls:'icon-add',
handler:function(){
//显示上传界面
$('#addHouse').dialog({
title: '房产管理|添加房屋信息',
width: 500,
iconCls:'icon-add',
height: 300,
closed: false,
cache: false,
href: 'houses/addHouse.jsp',
modal: true
});
}
}, '-', {
text: "删除",
iconCls: "icon-cut",
handler: function () {
//选中要修改删除的行
var rows = $("#housesManage").datagrid('getSelections'); //返回所有选中的行
if (rows.length > 0) {//选中几行的话触发事件
$.messager.confirm("提示", "您确定要重置该用户密码吗？", function (res) {//提示是否删除
if (res) {
//获得编号
var id=rows[0].id;
// 获得删除行索引
var tableindex = $("#housesManage").datagrid('getRowIndex', id);
$.post('houses/delHouse!delete',{
"house.id":id
},function(data){
if(data.message=="2"){
$.messager.alert('温馨提示','删除失败!','error');
}else{
//删除选中的行
$("#housesManage").datagrid("deleteRow",tableindex);
}
});
}
});
}
}
},'-',{
text: "修改",
iconCls: "icon-edit",
handler: function (){
//选中要修改删除的行
var rows = $("#housesManage").datagrid('getSelections'); //返回所有选中的行
if (rows.length > 0) {//选中几行的话触发事件
//获得编号
var id=rows[0].id;
//显示修改界面
$('#updateHouse').dialog({
title: '房产管理|修改房屋信息',
width: 500,
iconCls:'icon-edit',
height: 300,
closed: false,
cache: false,
href: 'houses/getHouse!get?house.id='+id,
modal: true
});
}
}
},'-',{
text: "刷新列表",
iconCls: "icon-reload",
handler: function (){
$("#housesManage").datagrid('reload');
}
}] ,onLoadError : function() {
$.messager.alert('温馨提示','数据加载失败!','error');
}
});
displayMsg();
});
//改变分页显示
function displayMsg() {
$('#housesManage').datagrid('getPager').pagination({
displayMsg : '当前显示<font color="red"> {from} - {to} </font>条记录 共 <font color="red">{total}</font> 条记录'
});
}
</script>
</body>
</html>
二、struts.xml中配置
<!-- 显示房产信息 -->
<action name="showHouses" class="com.wy.action.HouseAction" method="show">
<result type="json" name="success">
<param name="root">result</param>
</result>
</action>
三、对应的Action 处理类
private JSONObject result; //返回的json
private String rows; //每页显示的记录数
private String page; //当前第几页
//显示房产基本信息
public String show(){
//当前页
int intPage = Integer.parseInt((page == null || page == "0") ? "1":page);
//每页显示条数
int number = Integer.parseInt((rows == null || rows == "0") ? "10":rows);
//每页的开始记录 第一页为1 第二页为number +1
int start = (intPage-1)*number;
HouseDao houseDao=new HouseDao();
ArrayList<THouse> listHouses=houseDao.getHouses(start, number); //从数据库中查询数据
Map<String, Object> jsonMap = new HashMap<String, Object>();//定义map
int count=houseDao.getHouseCount(); //求出总记录数
//total键 存放总记录数，必须的
jsonMap.put("total", count);
jsonMap.put("rows", listHouses);//rows键 存放每页记录 list
result=JSONObject.fromObject(CommonUtil.getJsonNotNull(jsonMap));
return SUCCESS;
}
action 类中，rows，page 是用于EasyUI分页操作的，EasyUI会自动向后台传入参数：当前页及每页显示记录数，以此实现分页功能，此处只需要定义这两个变量即可。
{"total":5,"rows":[{"doorCard":"1-1101","id":22,"roomArea":"140","unitNum":1,"tusers":[],"isUse":"1","buildTime":"2015-04-01"},{"doorCard":"1-1202","id":29,"roomArea":"160","unitNum":1,"tusers":[],"isUse":"0","buildTime":"2015-04-06"},{"doorCard":"2-2202","id":28,"roomArea":"160","unitNum":2,"tusers":[],"isUse":"0","buildTime":"2015-04-06"},{"doorCard":"3-3301","id":26,"roomArea":"150","unitNum":3,"tusers":[],"isUse":"1","buildTime":"2015-04-13"},{"doorCard":"3-2102","id":27,"roomArea":"160","unitNum":3,"tusers":[],"isUse":"1","buildTime":"2015-04-06"}]}
五、效果截图
❹ easyui datagrid 删除多行 每删一行，行号就会发生变化，如何通过id删除，不通过行号删，该怎么写
做自己做的系统也是通过选择某一行根据这一行信息的id对数据库进行删除操作的，基本代码如下：
function del(){
var row = $('#list').datagrid('getSelected');
if(row){
$.messager.confirm('提示', '你确定删除此条记录吗？', function(r){
if (r){
location.href = '__URL__/del/id/'+row.id;
}
$.messager.show({
title:'信息',
msg:'已经取消了删除操作'
});
});
}else{
$.messager.alert('警告','没有选择任何记录信息！','warning');}
}