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');}
}