EasyUI datagrid border处理，加边框，去边框，都可以，easyuidatagrid

最新推荐文章于 2024-05-26 16:06:03 发布

weixin_30613433

最新推荐文章于 2024-05-26 16:06:03 发布

阅读量127

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/renrsh/p/4599471.html

版权

下面是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="../../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.min.js"></script>
    <script type="text/javascript" src="../../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 οnchange="changeBorder(this.value)">
    <option value="lines-both">Both</option>
    <option value="lines-no">No Border</option>
    <option value="lines-right">Right Border</option>
    <option value="lines-bottom">Bottom Border</option>
    </select>
    <span>Striped:</span>
    <input type="checkbox" οnclick="$('#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;';
				}
			}]]
		});

转载于:https://www.cnblogs.com/renrsh/p/4599471.html

weixin_30613433

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EasyUI datagrid border处理，加边框，去边框，都可以，easyuidatagrid

下面是EasyUI 官网上处理datagrid border的demo：主要是这句：$('#dg').datagrid('getPanel').removeClass('lines-both lines-no lines-right lines-bottom').addClass(cls); <!DOCTYPE html> &lt...
复制链接

扫一扫