首页 > 代码库 > EasyUI datagrid border处理，加边框，去边框，都能够

EasyUI datagrid border处理，加边框，去边框，都能够

2024-09-19 12:52:47   217人阅读

以下是EasyUI 官网上处理datagrid border的demo：

主要是这句：

$(‘#dg‘).datagrid(‘getPanel‘).removeClass(‘lines-both lines-no lines-right lines-bottom‘).addClass(cls);

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Row Border in DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/demo.css">
    <script type="text/javascript" src="http://www.mamicode.com/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.mamicode.com/jquery.easyui.min.js"></script>
    </head>
    <body>
    <h2>Row Border in DataGrid</h2>
    <p>This sample shows how to change the row border style of datagrid.</p>
    <div style="margin:20px 0;">
    <span>Border:</span>
    <select onchange="changeBorder(this.value)">
    <option value="http://www.mamicode.com/lines-both">Both</option>
    <option value="http://www.mamicode.com/lines-no">No Border</option>
    <option value="http://www.mamicode.com/lines-right">Right Border</option>
    <option value="http://www.mamicode.com/lines-bottom">Bottom Border</option>
    </select>
    <span>Striped:</span>
    <input type="checkbox" onclick="$(‘#dg‘).datagrid({striped:$(this).is(‘:checked‘)})">
    </div>
    <table id="dg" class="easyui-datagrid" title="Row Border in DataGrid" style="width:700px;height:250px"
    data-options="singleSelect:true,fitColumns:true,url:‘datagrid_data1.json‘,method:‘get‘">
    <thead>
    <tr>
    <th data-options="field:‘itemid‘,width:80">Item ID</th>
    <th data-options="field:‘productid‘,width:100">Product</th>
    <th data-options="field:‘listprice‘,width:80,align:‘right‘">List Price</th>
    <th data-options="field:‘unitcost‘,width:80,align:‘right‘">Unit Cost</th>
    <th data-options="field:‘attr1‘,width:250">Attribute</th>
    <th data-options="field:‘status‘,width:60,align:‘center‘">Status</th>
    </tr>
    </thead>
    </table>
    <script type="text/javascript">
    function changeBorder(cls){
    $(‘#dg‘).datagrid(‘getPanel‘).removeClass(‘lines-both lines-no lines-right lines-bottom‘).addClass(cls);
    }
    </script>
    <style type="text/css">
    .lines-both .datagrid-body td{
    }
    .lines-no .datagrid-body td{
    border-right:1px dotted transparent;
    border-bottom:1px dotted transparent;
    }
    .lines-right .datagrid-body td{
    border-bottom:1px dotted transparent;
    }
    .lines-bottom .datagrid-body td{
    border-right:1px dotted transparent;
    }
    </style>
    </body>
    </html>

当然还能够直接在datagrid定义时採用以下的方式（styler部分）： 

grid = $(‘#grid‘).datagrid({
			title : ‘‘,
			url : ‘‘,
			striped : true,
			rownumbers : true,
			pagination : false,
			singleSelect : true,
			idField : ‘id‘,
			sortOrder : ‘desc‘,
			columns : [ [ {
				width : ‘100‘,
				title : ‘地址‘,
				field : ‘address‘,
				sortable : true,
				styler : function(value, row, index) {
					return ‘border:0;‘;
				}
			}]]
		});



EasyUI datagrid border处理，加边框，去边框，都能够


联系
我们