所有回答(6)
需要formatter一下才能显示正确的数据
{ field: 'delete', title: '删除', width: 100, align: 'center' }, 末尾的","号多余！
找到了。。
　　尼玛就是Json数据格式不对。
请问，怎么处理的？
博主，能问一下最终正确的是怎么写的么，JsonResult json = new JsonResult();，这个jsonresult是做什么的？
我也遇到这个问题了 你解决了吗
&&&您需要以后才能回答，未注册用户请先。Datagrid的创建需要做以下几件事情，
第一步，我们需要引入以下几个个包，少一个都不可以，否则你会发现你无论做的再怎么对结果都会出错，
第二步，引入了这些包之后，我们需要创建一个javabeans，就像是建表一样，照着填上去就可以了，
public&class&Library{
这些写你要的属性，然后点击右键获得get和set方法
private&&类型&&属性名;
public&String toString() {
return&&toString类型名&[类型名=&&+类型名+
public&Library() {
public&Library(String
this.类型名=
好了这个bean就做好了。
第三步，在后台dao层建立个方法，把bean的信息放进去
public&List&bean的名字& daoShoworg(String
&&&&List&bean的名字&
new&ArrayList&bean的名字&();
conn&= this.getConn();
pstmt&= conn.prepareStatement(sql);
rs&= pstmt.executeQuery();
while&(rs.next()) {
Library 实例名=new&bean的名字(
&&&&&&&&&&&&&&&&&&//一个个放进去
Rs.get类型(1),
list.add(lib);
} catch&(Exception
e.printStackTrace();
} finally&{
this.closeAll(conn,
return&list;
这个后台代码就创建好了。
第四步，建立一个servlet，获得到dao里面的方法，然后往前台送，easyui会根据url=servlet获得数据，
String sql = “select
你需要的项目 from &表名”
//注意这里sql找到的要与你的后台的相对应，不能说select
了一name，age，然后后台只toString了一个
&&&List&Library&
a.daoShoworg(sql);
&&&&int&total&=
a.getTotal();
&&&&JSONArray Js&= JSONArray.fromObject(list);
&&&&JSONObject&jsonObject&=
new&JSONObject();
&&&&jsonObject.put(&total&,
list.size());
&&&&jsonObject.put(&rows&,
Js.toString());
&&&&PrintWriter out=response.getWriter();
&&&&out.print(jsonObject.toString());
第五步，后台代码都弄好了，现在就是要在前台添加一个datagrid了，首先在body底下添加一个div
&&&&&&&&&&&table&id=&dg&&
&&&&&&/table&
然后这里介绍的使用js来渲染这个table，
在上面的js代码中写到
&&&&&&&&&&&&&$(function(){
$('#dg').datagrid({
&&&&&&&&&&&&&&&&&&&//下面三列是分页所需待会会讲到
pagination:true,
pageList:[8,16,24,32,40]
rownumbers:true,
height:505&,
url:'你的json数据打包的后台'
fitColumns:true
frozenColumns:[[//冻结列特性 ,不要与fitColumns 特性一起使用
//这个checkbox在后面使用删除和修改需要用到，
field:'ck'
width:10&,
//给你的数据放列名，这里如果你后台需要与之相对应，否则会出现交错或者空出的情况
columns:[[
field:'libname'
,//切记要和你的对象名一致，不然不会出来。
title:'列名',
width:20&,
在对datagrid成功创建并且建立了数据之后之后就是对数据进行操作了，
pagination:true,
pageList:[8,16,24,32,40]
rownumbers:true,
在创建datagrid的时候写入这些，然后就交给后台了；
<span style="color:#.
int&currentPage&= Integer.parseInt(request.getParameter(&page&));//1
int&pageSize&&&&= Integer.parseInt(request.getParameter(&rows&));//5
接受在前台传输过来的page和rows&#20540;，这个是easyui自带的，只要写了前端后台就可以接受到
<span style="color:#.
分页需要在原先的datagrid拼接json的后台servlet中的sql语句后面加个限制
limit &&&#43; (currentPage-1)*pageSize&&#43;&
, &&#43; pageSize&#43;&
3.在后台dao里面写个方法
public&int&getTotal(){
int&count&= 0;
String sql&=
& select count(*) from 表&&&;
conn&= this.getConn();
pstmt&= conn.prepareStatement(sql);
rs&= pstmt.executeQuery();
if(rs.next()){
rs.getInt(1);
catch&(Exception
e.printStackTrace();
} finally&{
this.closeAll(conn,
return&count;
然后在servlet用一个int来接受它
将这个int放进
&jsonObject.put(&total&,
好了现在这个datagrid就有了分页的效果
各位照套这个就可以了
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：249次
排名：千里之外15660人阅读
技术（48）
任何系统恐怕都离不开查询，在这里简单的说一说easyui查询页面，对于高手和老鸟们可以绕开走哦哦。刚开始接触和学习的朋友，也许能有点小帮助哦。
首先整一个a.htm
没有页面哪里去写代码，当然你也可以做一个aspx页面，甚至jsp、php，效果都是一样一样的。大家没必要纠结。这里只展示前台页面的具体搞法，至于后台怎么从数据查询数据，那是另外一件事。不同的平台不同的搞法，这里不说了。
& 最前前面，当然是引入jquery easyui库文件
&link rel=&stylesheet& type=&text/css& href=&../js/themes/default/easyui.css&/&
&link rel=&stylesheet& type=&text/css& href=&../js/themes/icon.css&/&
&link rel=&stylesheet& type=&text/css& href=&../js/themes/demo.css&/&
&script type=&text/javascript& src=&../js/EasyUI/jquery-1.8.0.min.js&&&/script&
&script type=&text/javascript& src=&../js/EasyUI/jquery.easyui.min.js&&&/script&
&script type=&text/javascript& src=&../js/EasyUI/easyui-lang-zh_CN.js&&&/script&
这个什么意思就不说了，但是也是必要的。
然后在页面的&body&&/body&之间加入展示数据的，也就是我们要学习使用的Easyui-datagrid
&table id=&dt& class=&easyui-datagrid&
data-options=&title:'信息系统管理',rownumbers:true,toolbar:'#tb',fit:true,fitColumns:true,pagination:true,singleSelect:true “&
&th data-options=&field:'Id',hidden:true&&编号&/th&
&th data-options=&field:'mDesc',width:120&&描述&/th&
&th data-options=&field:'mN',width:120&&数量&/th&
&th data-options=&field:'mD',width:100&&日期&/th&
这个就是表&#26684;的四个列，其实Id这一列给隐藏了，看看估计就能明白。再怎么笨也不会比我笨。我都能看明白。表&#26684;整好了，没有数据是白扯。怎么加载数据了？
&script type=&text/javascript&&
$(document).ready(function () {
QueryData();
function QueryData(){
var p1 = $(“#q1”).val();
var p2 = $(“#q2”). combox(‘getValue’);
//var ajax = $.ajax({ url: “../d.ashx”,data: jQuery.param({ &p1&: p1,”p2”:p2})}
//AJAX请求数据的过程，这里就不搞了，就是通过jquery发生AJAX请求，后台直接返回json。没有任何特殊的。
var data ={rows:[{“Id”:1,” mDesc” :”数据测试1”,”'mN”:321,”mD”:””},{“Id”:2,” mDesc” :”数据测试2”,”'mN”:221,”mD”:””}],total:2};
if (data) { $(&#dt&).datagrid('loadData', data); };
当然，这里的data也可以通过ajax方法到后台请求数据库来查询。
这里就是表&#26684;的 data-options
的各个项分别代表，easyui 的属性基本都这样，也没什么道理，easyui就这个规则
title:表&#26684;标题
rownumbers:true 行号
toolbar:'#tb',工具条
fit:true,表&#26684;是否自适用页面大小，不太理解自己可以试一下
fitColumns:true,适用列
pagination:true,否要分页
singleSelect:true 单行选择
这个&#20284;乎太简单，easyui嘛就是这个样子，但是要把一个复杂查询页面做出来，还有很多工作可以做，后台就不说了，前端还可以增加很多查询条件
怎么增加？上面的options不是有一个这个嘛toolbar:'#tb',工具条。意思就是我们在页面再增加一个&div&
并把id设置为tb,这样easyui会自动帮你把table和div
的位置调整好。那么这个toolbar什么样了？
&div id=&tb& style=&padding:2height:auto&&
描述:&input id=&Q1& class=&easyui-validatebox& style=&width:80px&/&
&bum部门:&input id=&Q2& class=&easyui-combobox& data-options=&valueField:'Id',textField:'DeptName'& style=&width:150px&/&
&a id=&btnQuery& href=&#& class=&easyui-linkbutton& iconCls=&icon-search& onclick=&QueryData()&&查询&/a&
这个位置实际上就是输入查询，然后点查询，请求数据，其中QueryData()就是把检测查询条件，请求后台数据，并把数据绑定到easyui-datagrid
上。如果直接这么现实，页面不一定好看，具体的调整自己可以调整style
好了，一个查询基本上搞完了。个人觉得这个东西看看即可，真实现的时候还是蛮简单的。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：206429次
积分：2634
积分：2634
排名：第12864名
原创：67篇
评论：123条
(1)(1)(1)(1)(3)(1)(1)(1)(1)(1)(1)(1)(1)(1)(2)(3)(1)(2)(2)(1)(1)(1)(1)(1)(2)(1)(1)(1)(1)(2)(1)(3)(1)(1)(1)(1)(3)(1)(4)(6)(1)(3)(2)(4)(2)(3)easyui-datagrid 如何统一编辑某列数据，并提交所有
1, 把datagrid某一个单元格的信息，复制到每行的某列中
2. 提交datagrid所有行信息到后台}