解决easyUI-datagrid不显示的问题

      最近项目中需要用到表格,使用easyUI-datagrid。

      使用过程中发现了一个奇怪的问题,初始时将datagrid的display属性为none,之后点击某一个按钮后,再将display设置为block,可并没有按照预期期望那样把表格显示出来,只是出来一条竖线。

     但这时如果将浏览器页面改变下大小,表格又显示出来了。

     经过分析后发现,datagrid控件的长宽使用百分比的形式,之所以不能显示可能是由于在js中设置display为block时不能获取父窗体的大小所致(只是猜测)。后来调用datagrid("resize")后问题解决。

    

已标记关键词 清除标记
相关推荐
返回的json是这样的: [ { "pageCount": 13, "data": [ { "nickName": "", "fullName": "深圳市腾讯计算机系统有限公司", "id": 57190, "shortName": "腾讯" }, { "nickName": "", "fullName": "腾讯(科技)深圳有限公司", "id": 63472, "shortName": "腾讯" }, { "nickName": "", "fullName": "上海益盟软件(腾讯系互联网金融公司", "id": 391211, "shortName": "腾讯" }, { "nickName": "", "fullName": "上海腾讯 (11个月", "id": 419379, "shortName": "腾讯" }, { "nickName": "", "fullName": "上海腾讯(", "id": 419380, "shortName": "腾讯" }, { "nickName": "", "fullName": "上海腾讯(10000人以上) [ 1 年2个月]", "id": 419381, "shortName": "腾讯" }, { "nickName": "", "fullName": "上海腾讯(2年", "id": 419382, "shortName": "腾讯" }, { "nickName": "", "fullName": "上海腾讯(500-1000人) [ 2年8个月]", "id": 419383, "shortName": "腾讯" }, { "nickName": "", "fullName": "上海腾讯(外包)(1000-5000人) [ 10个月]", "id": 419384, "shortName": "腾讯" }, { "nickName": "", "fullName": "上海腾讯互动娱乐", "id": 419386, "shortName": "腾讯" } ], "offset": 0, "hasPrev": false, "topCount": 10, "count": 121, "pageSize": 10, "hasNext": true, "currentPage": 1, "actualPageSize": 10 } ] ![datagrid的请求是这样的:](https://img-ask.csdn.net/upload/201702/23/1487822572_247181.png) ![结果是这样的](https://img-ask.csdn.net/upload/201702/23/1487822614_464712.png) 要怎么把结果写到列表里呢 求大神指点
刚接触easyui,不太熟,根据datagrid的格式拼装了数据,无法显示到datagrid里,但是在jsp里面创建一个var变量就可以显示,求大牛帮忙看下 JSP页面代码: ``` $(function() { //alert(getParasFromUrl("selectType")); //alert(getParasFromUrl("objectID")); //初始化表格内容 $('#dataList').datagrid({ title : 'IP地址详情', //data:dataGrid, method : 'post', singleSelect : true, height : 370, fit : true, fitColumns : true, striped : true, collapsible : true, //url : "/jsp/jcss/IPQueryDetailAction.do?operation=queryIPFromDB", url : "/InfoMgr/jsp/jcss/IPQueryDetailAction.do?operation=query&selectType="+getParasFromUrl("selectType") + "&objectID=" + getParasFromUrl("objectID"), sortName : 'IP', pageSize: 50, //每页显示的记录条数,默认为10 pageList: [30, 50, 100, 200, 300], //分页显示选项 sortOrder : 'asc', remoteSort : false, idField : 'ID', pagination : true, // 显示分页 rownumbers : true, // 显示行号 columns : [ [ {field : 'ID', title : '序号', width : 20, sortable : true, halign : 'center'}, {field : 'IP', title : 'IP', width : 100, sortable : true, halign : 'center'}, {field : 'HOSTNAME', title : '主机名称', width : 100, sortable : true, halign : 'center'}, {field : 'GATEWAY', title : '网关', width : 80, sortable : true, halign : 'center'}, {field : 'USEFOR', title : '用途', width : 120, sortable : true, halign : 'center'}, {field : 'PROPOSER', title : '申请人', width : 120, sortable : true, halign : 'center'}, {field : 'CREATEDATE', title : '申请时间', width : 120, sortable : true, halign : 'center'}, ] ], onLoadSuccess : function() { //alert('OK'); //$('#dataList').datagrid('reload'); //$('#dataList').datagrid('clearSelections'); // 一定要加上这一句,要不然datagrid会记住之前的选择状态,删除时会出问题 }, onDblClickRow: function (rowIndex, rowData) { }, onClickRow: function (rowIndex, rowData) { }, }); }); ``` 后台数据拼装: ``` public List getIPSegFromDB(String ID){ System.out.println("call getIPSegFromDB"); List<String> lstIPs = new ArrayList<String>(); StringBuffer sb = new StringBuffer(); sb.append("{\"total\":28,\"rows\":["); sb.append("{\"ID\":\"1\",\"IP\":\"192.168.1.1\",\"HOSTNAME\":\"test\",\"GATEWAY\":\"192.168.1.254\",\"USEFOR\":\"测试\",\"PROPOSER\":\"11\",\"CREATEDATE\":\"2015-11-21\"},"); sb.append("{\"ID\":\"2\",\"IP\":\"192.168.1.2\",\"HOSTNAME\":\"test\",\"GATEWAY\":\"192.168.1.254\",\"USEFOR\":\"测试\",\"PROPOSER\":\"111\",\"CREATEDATE\":\"2015-11-21\"}"); sb.append("]}"); lstIPs.add(sb.toString()); return lstIPs; } ``` 返回json: ``` response.getWriter().print(JSONArray.fromObject(qis.getIPSegFromDB(objectID)).toString()); ``` 鼓捣一晚上了没查出问题来,但是按照下面的格式写到jsp页面里,就能显示出来。。。。求解啊。。。 ``` var dataGrid = {"total":28,"rows":[ {"ID":"1","IP":"192.168.1.1","HOSTNAME":"test","GATEWAY":"192.168.1.254","USEFOR":"测试","PROPOSER":"111","CREATEDATE":"2015-11-21"},{"ID":"2","IP":"192.168.1.2","HOSTNAME":"test","GATEWAY":"192.168.1.254","USEFOR":"测试","PROPOSER":"111","CREATEDATE":"2015-11-21"}, {"ID":"1","IP":"192.168.1.1","HOSTNAME":"test","GATEWAY":"192.168.1.254","USEFOR":"测试","PROPOSER":"111","CREATEDATE":"2015-11-21"},{"ID":"2","IP":"192.168.1.2","HOSTNAME":"test","GATEWAY":"192.168.1.254","USEFOR":"测试","PROPOSER":"111","CREATEDATE":"2015-11-21"} ]}; ```
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页