在使用easyui的datagrid時,需要考慮到瀏覽器不同的像素問題,所以,在使用時,我們需要自己寫一個函數
code:
- function getWidth(percent){
- return $(window).width() * percent;
- }
這樣在初始化時:
- $("#tt").datagrid({
- width: getWidth(0.6)
- });
當然,有時候我們會考慮瀏覽器縮放,也要改變其中顯示,這時,加上一個resize事件就可以了
- $(window).resize(function(){
- //alert("change....");
- $("#tt").datagrid({
- width: getWidth(0.6)
- });
- );
甚至,我們需要考慮到列寬也需要改變(因情況,條件而定,這裏舉一例),我們需要在寫一個函數:
- function fixWidthTable(percent){
- return getWidth(0.6) * percent;
- }
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>DataGrid ContextMenu - jQuery EasyUI Demo</title>
- <link rel="stylesheet" type="text/css" href="../themes/default/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-1.7.1.min.js"></script>
- <script type="text/javascript" src="../jquery.easyui.min.js"></script>
- <script>
- function fixWidthTable(percent){
- return getWidth(0.6) * percent;
- }
- function getWidth(percent){
- return $(window).width() * percent;
- }
- $(function(){
- $(window).resize(function(){
- //alert("change....");
- $("#tt").datagrid({
- width: getWidth(0.6)
- });
- });
- $('#tt').datagrid({
- url: 'datagrid_data2.json',
- title: 'DataGrid - ContextMenu',
- width: getWidth(0.6),
- height: 'auto',
- fitColumns: true,
- columns:[[
- {field:'itemid',title:'Item ID',width:fixWidthTable(0.12)},
- {field:'productid',title:'Product ID',width:fixWidthTable(0.15)},
- {field:'listprice',title:'List Price',width:fixWidthTable(0.12),align:'right'},
- {field:'unitcost',title:'Unit Cost',width:fixWidthTable(0.12),align:'right'},
- {field:'attr1',title:'Attribute',width:fixWidthTable(0.38)},
- {field:'status',title:'Status',width:fixWidthTable(0.11),align:'center'}
- ]],
- onHeaderContextMenu: function(e, field){
- e.preventDefault();
- if (!$('#tmenu').length){
- createColumnMenu();
- }
- $('#tmenu').menu('show', {
- left:e.pageX,
- top:e.pageY
- });
- }
- });
- });
- function createColumnMenu(){
- var tmenu = $('<div id="tmenu" style="width:100px;"></div>').appendTo('body');
- var fields = $('#tt').datagrid('getColumnFields');
- for(var i=0; i<fields.length; i++){
- $('<div iconCls="icon-ok"/>').html(fields[i]).appendTo(tmenu);
- }
- tmenu.menu({
- onClick: function(item){
- if (item.iconCls=='icon-ok'){
- $('#tt').datagrid('hideColumn', item.text);
- tmenu.menu('setIcon', {
- target: item.target,
- iconCls: 'icon-empty'
- });
- } else {
- $('#tt').datagrid('showColumn', item.text);
- tmenu.menu('setIcon', {
- target: item.target,
- iconCls: 'icon-ok'
- });
- }
- }
- });
- }
- </script>
- </head>
- <body>
- <h2>DataGrid - ContextMenu</h2>
- <div class="demo-info" style="margin-bottom:10px">
- <div class="demo-tip icon-tip"></div>
- <div>Right click the header of datagrid to show context menu.</div>
- </div>
- <table id="tt"></table>
- </body>
- </html>
不過在做測試中,遇到了各種奇怪的問題,今天早上一看,發現沒有昨天的問題了,暴汗················
也不知道是什麼原因!
如果這文有幸有高手看到,並發現了問題,或者有解決方案,貼出來也讓俺瞅瞅········先謝謝啦························
上面的窗口大小改變事件中用的是重新加載,這樣速度會慢很多,而API中提供了resize方法,所以改爲:
- $("#tt").datagrid("resize",{width:getWidth(0.6)});