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

最新推荐文章于 2021-06-05 00:22:34 发布

caiyl1314

最新推荐文章于 2021-06-05 00:22:34 发布

阅读量4.3k

点赞数

分类专栏： HIS 文章标签： jquery dhtmlxGrid ajax

本文链接：https://blog.csdn.net/cai7095576/article/details/13371863

版权

HIS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

使用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();
	}

caiyl1314

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
dhtmlxGrid初始化加载，jquery请求加载数据

使用jquery的ajax请求到后台，取得数据库数据，返回前台grid中。引入使用jquery需使用的js文件引入使用dhtmlxCombo需使用的文件js文件 var mygrid; // 定义mygrid $(document).ready(function(){ mygrid = new dhtmlXGridObje
复制链接

扫一扫