easyui的datagrid怎么绑定数据库

easyui的datagrid怎么绑定数据库,第1张

①首先肯定需要有一个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的属性,你可以进行一些转换)。

以下是JS代码:

$("#btnSave").click(function () {

//保存数据

//$.messager.alert("Info"友灶知辩慎, subType, "info")

$("好消#frmSHCBF").form("submit",{

url: "Handler1.ashx?type=" + subType,

type:"POST",

onsubmit: function () {

return $(this).form("validate")

//if ($(this).form("validate")) {

//$.messager.alert("保存信息", "保存失败,请检查数据格式", "error")

//}

},


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11992379.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存