一、我们先让表格自适应宽度
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic DataGrid - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/bootstrap/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> </head> <body> <h2>Basic DataGrid</h2> <div class="demo-info"> <div class="demo-tip icon-tip"></div> <div>The DataGrid is created from markup, no JavaScript code needed.</div> </div> <div style="margin:10px 0;"></div> <table class="easyui-datagrid" data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get',fitColumns:'true'"> <thead> <tr> <th data-options="field:'itemid',width:300">Item ID</th> <th data-options="field:'productid',width:300">Product</th> <th data-options="field:'listprice',width:300,align:'right'">List Price</th> <th data-options="field:'unitcost',width:300,align:'right'">Unit Cost</th> <th data-options="field:'attr1',width:300">Attribute</th> <th data-options="field:'status',width:300,align:'center'">Status</th> </tr> </thead> </table> <script> $(window).resize(function () { $('#tt').datagrid('resize'); }); </script> </body> </html>
二、修改jquery.easyui.min.js这个文件来解决滚动条问题
function _4bf(_4c0){ var opts=$.data(_4c0,"datagrid").options; var dc=$.data(_4c0,"datagrid").dc; var wrap=$.data(_4c0,"datagrid").panel; var _4c1=wrap.width()+20; var _4c2=wrap.height(); var view=dc.view; var _4c3=dc.view1; var _4c4=dc.view2; var _4c5=_4c3.children("div.datagrid-header"); var _4c6=_4c4.children("div.datagrid-header"); var _4c7=_4c5.find("table"); var _4c8=_4c6.find("table"); view.width(_4c1); var _4c9=_4c5.children("div.datagrid-header-inner").show(); _4c3.width(_4c9.find("table").width()); if(!opts.showHeader){ _4c9.hide(); }
可以看到我在 5 行处加上了一个+20,这样让宽度正好覆盖滚动条
相关推荐
UI设计在一个系统中的重要性是不容忽视的,我们开发人员要做到:让用户去控制...给你的Easyui-DataGrid 表头添加一点料吧 Easyui-Datagrid—表头灵活显示http://blog.csdn.net/u010293698/article/details/47956865
easyui-datagrid之间拖拽效果demo
easyui-datagrid2-demo.zip
Spring Boot 系列教程 EasyUI-datagrid
easyui\easyui-datagrid10-demo.zip easyui\easyui-datagrid11-demo.zip easyui\easyui-datagrid12-demo.zip easyui\easyui-datagrid13-demo.zip easyui\easyui-datagrid14-demo.zip easyui\easyui-datagrid15-demo....
easyui-datagrid导出至Excel插件,中文没有乱码问题。
easyui-datagrid21-demo.zip
个人收藏的插件,jquery-easyui-datagrid,分享给大家。
用于myeclipse软件下ssm框架 easyUIdatagrid增删改查
easyui-datagrid、edtabledatagrid ,行内编辑
easyui-datagrid官方demo,包含datagrid中combobox的使用方法,以及选择行,删除行,编辑行等实现方法。浏览器直接打开html可能无法访问他的data/datagrid_data.json里的数据,可以将datagrid_data.json里的数据放到...
jquery.easyui.datagrid自动合并列扩展,支持多列合并。 用法:加载成功后 $('#'+tab).datagrid("autoMergeCells",['列名','列名']);
这是我自己总结出来easyui-textbox和easyui-combobox的onchange事件响应实例,绝对可用,网上很多实例都无法运行,这个我亲自测试可用使用才传上来的,供大家参考学习。
最近在用jquery做页面,当datagrid放置数字文本框时输入小数会自动四舍五入,然后加了小数位数限制时不能输入小数点了。 最后发现是easyui1.4的bug,把这个补丁引入进去就好了
本资源主要是使用easyui控件,并结合ASP。net实现datagrid与数据库的连接,数据的增,删,改,分页操作,完成tree加载数据库数据,希望对开发初学者有所帮助
详细讲解Easyui中datagrid控件,编辑模式。扩展编辑器以及扩展验证规则。
项目工具代码,中间包含了service和controller两层,model可以自己定义
jquery-easyui-EDT-1.5.2-build1 jquery-easyui-EDT-1.5.2-build1
easyui的datagrid中editor和combogrid的结合使用,datagrid中编辑项是下拉表的实现方式
JS EasyUI DataGrid动态加载数据