您的位置：首页 > Web前端 > JQuery

dhtmlxGrid初始化加载，jquery请求加载数据

2013-10-28 22:12 267 查看

使用jquery的ajax请求到后台，取得数据库数据，返回前台grid中。

引入使用jquery需使用的js文件

<script type="text/javascript" src="js/jquery-1.6.1.js"></script>

引入使用dhtmlxCombo需使用的文件

<script type="text/javascript" src="dhtmlxCombo/codebase/dhtmlxcommon.js"></script>
<script type="text/javascript" src="js/dhtmlxgridcell.js"></script>
<script type="text/javascript" src="js/dhtmlxgrid.js"></script>
<link rel="stylesheet" href="css/dhtmlxgrid.css" type="text/css"></link>

js文件

<script>
var mygrid; // 定义mygrid
$(document).ready(function(){
mygrid = new dhtmlXGridObject('gridbox1');
mygrid.enableAutoWidth(true); // 自动宽度
// mygrid.setImagePath("dhtmlxGrid/codebase/imgs/");
// mygrid.setSkin("dhx_custom");
mygrid.setHeader("选择,所属科室,诊室编号,本机IP,本机MAC地址,本机名称,是否为叫号主机"); // 设置grid的头
mygrid.setInitWidths("*,*,*,*,*,*,*"); // 初始宽度，*为自动
mygrid.setColTypes("ch,ro,ro,ro,ro,ro,ro");
mygrid.setColAlign("left,left,left,left,left,left,left");
// mygrid.attachEvent("onRowDblClicked", onRowDblClicked); // onRowDblClicked函数在下面，双击事件
mygrid.setEditable(true);
//mygrid.load("learn/loadgrid.htm");
mygrid.init(); // 初始化
mygridjiazai(); // 调用方法，加载数据（数据库查询）
});

function mygridjiazai(){
$.ajax({
type:"post",
url:"a/grid1.htm",
cache: false,
error:function(){
// alert("没有该病人记录！");
},
success: function(data){
if(data=="fail"){
alert("没有该病人记录！");
}else{
// console.info(data);
var json = eval("{" + data + "}"); // 将后台传过来的值转化为json数组
var str;
for(var i=0;i<json.length;i++){
alert(json[i].nodecode+" "+json[i].deptname+" "+json[i].clc_roomnum+" "+json[i].localip+" "+json[i].localmac+" "+json[i].localname+" "+json[i].isclcscreenpc);
str=json[i].hosnum+","+json[i].nodecode+","+json[i].localip;  // 将hosnum,nodecode,localip保存在rowid里
mygrid.addRow(str,[
'',
json[i].deptname,
json[i].clc_roomnum,
json[i].localip,
json[i].localmac,
json[i].localname,
json[i].isclcscreenpc
]);
}
// alert(json);
}
}
});
}
</script>

在jsp的html中加入

<body>
<div id="gridbox1" style="background-color:white;height:280px;"></div>
</body>

加载dhtmlxGrid后台，action里代码（如有中文get请求的话需进行转码操作）

@RequestMapping(value="/grid1",method = RequestMethod.POST) // post请求，get请求有中文的话需转码
public void fin(HttpServletRequest request,HttpServletResponse response)throws Exception{
response.setContentType("text/html;charset=utf-8");
DBOperator db = new DBOperator();
PrintWriter pw = null;
try
{
pw = response.getWriter();
System.out.println("请求成功");
String sql = "select hosnum,nodecode,deptname,deptcode,localip,localmac,clc_roomnum,localname,isclcscreenpc from CLC_CALLNUMSET";
List list = db.find(sql);
JSONArray json = JSONArray.fromObject(list); // 存入json
System.out.println(json.toString());
pw.print(json.toString()); // 传到前台
db.commit();
}
catch (RuntimeException e)
{
e.printStackTrace();
db.rollback();
pw.print("fail");
}
finally
{
db.freeCon();
}
pw.flush();
pw.close();
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航