easyuitable修改数据库_easyui是怎么获取数据库数据的

Ⅰ easyui的datagrid怎么绑定数据库

①首先肯定需要有一个table标签，给它定义一个id，在js中通过id.datagrid方法即可创建表格
<table id="tt"></table>
$('#tt').datagrid(options);

②创建表格的列名有两种方式：第一种是直接在table标签中定义，第二种是在js中定义：
我使用的是第一种方式：

<table id="loginInfoTable"
title="用户信息一览"
border="0"
cellspacing="0"
cellpadding="0"
iconCls="icon-edit"
width="98%"
idField="loginId"
pagination="true"
remoteSort="false"
singleSelect="false"
showFooter="false"
striped="true"
url="<%=root%>/ospm/loginInfo/doLoginInfoSearch.jhtml">
<thead>
<tr align="center">
<th field="ck" width="20" checkbox="true" width="20"></th>
<th field="loginCode" width="200">用户名</th>
<th field="statuValue" width="100">状态</th>
<th field="opt" formatter='optFormater' width="150">操作</th>
</tr>
</thead>
</table>

③向后台请求数据
datagrid有一个属性叫url，在进入页面后，它会通过ajax方式向后台发送请求，后台封装相应数据（JSON格式）再返回给前台即可显示。注意：datagrid在回调函数中必须获得两项json数据：total表示查询出的总结过，rows表示显示在table中的数据集合。
/**
* 封装Json数据
*/
long total = 0; // 符合查询的总条数
List<LoginInfoTableDto> lstTable = null; // 查询结果
total = (Long) mapLoginInfo.get(Constant4Ospm.TOTAL);
if (mapLoginInfo.get(Constant4Ospm.SEARCH_RESULT) != null) {
lstTable = (List<LoginInfoTableDto>) mapLoginInfo
.get(Constant4Ospm.SEARCH_RESULT);
} else {
//注：如果从数据库查询不出数据，也必须封装一个空的json集合，不然页面就会报js错误
lstTable = new ArrayList<LoginInfoTableDto>();
}
JSONObject datas = new JSONObject();
// 设置总共有多少条记录
datas.put(Constant4Ospm.TOTAL, total);
// 设置当前页的数据
datas.put(Constant4Ospm.PAGE_SIZE, lstTable);

④后台数据与表格关联
后台过来的数据怎么与表格每一列对应呢？其实很简单：后台rows中包含了名叫LoginInfoTableDto的javabean-json集合，datagrid的field和idField对应LoginInfoTableDto中的一个属性（大体上是这样，当然field也可以不对应javabean的属性，你可以进行一些转换）。

Ⅱ easyui是怎么获取数据库数据的

easyui自带有 loadData 方法，下面有两种加载数据方法：
<table id="tt" border="false" fit="true" fitcolumns="true" iconcls="icon-edit" singleselect="true"></table>

function strToJson(str) {
var json = eval('(' + str + ')');
return json;
}

1.加载静态数据方法
var htmls = "[{'ID':'FI-SW-01','aname':10.00,'mname':'P','uname':36.50,'pname':'Large','pcode':'EST-1'},{'ID':'FI-SW-02','aname':10.00,'mname':'P','uname':36.50,'pname':'Large','pcode':'EST-1'},{'ID':'FI-SW-03','aname':10.00,'mname':'P','uname':36.50,'pname':'Large','pcode':'EST-1'},{'ID':'FI-SW-04','aname':10.00,'mname':'P','uname':36.50,'pname':'Large','pcode':'EST-1'},{'ID':'FI-SW-05','aname':10.00,'mname':'P','uname':36.50,'pname':'Large','pcode':'EST-1'}]";
$('#tt').datagrid('loadData', strToJson(htmls));

2.ajax动态加载数据方法（支持后台数据库）
$.ajax({
url: "/index/index",
data: { id: 1, code: "101" },
datatype: "json",
type: "POST",
traditional: true,
success: function(data) {
$('#tt').datagrid('loadData', strToJson(data));
}
})
返回的data数据格式为方法1中的htmls字符串格式。
希望对你有帮助。

Ⅲ 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>

<title>房产信息管理</title>

</head>

<body>

$(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中配置

<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"}]}

五、效果截图

导航:首页 > 编程大全 > easyuitable修改数据库

easyuitable修改数据库

与easyuitable修改数据库相关的资料

友情链接