EasyUI-数据表格单元格风格


@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Scripts/jquery.easyui.min.js"></script>
    <script src="~/Scripts/easyui-lang-zh_CN.js"></script>
    <link href="~/Content/EasyUI/themes/icon.css" rel="stylesheet" />
    <link href="~/Content/EasyUI/themes/default/easyui.css" rel="stylesheet" />

</head>
<body>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>DataGrid Cell Style - 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>DataGrid Cell Style</h2>
        <p>The cells which listprice value is less than 30 are highlighted.</p>
        <div style="margin:20px 0;"></div>
        <table class="easyui-datagrid" title="DataGrid Cell Style" style="width:700px;height:250px"
               data-options="
                singleSelect: true,
                iconCls: 'icon-save',
                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',styler:cellStyler">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 cellStyler(value, row, index) {
                if (value < 30) {
                    return 'background-color:#ffee00;color:red;';
                }
            }
        </script>
    </body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值