EasyUI-数据表格DataGrid上的复选框选择


@{
    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>CheckBox Selection on DataGrid</h2>
        <p>Click the checkbox on header to select or unselect all selections.</p>
        <div style="margin:20px 0;"></div>

        <table id="dg" class="easyui-datagrid" title="CheckBox Selection on DataGrid" style="width:700px;height:250px"
               data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get'">
            <thead>
                <tr>
                    <th data-options="field:'ck',checkbox:true"></th>
                    <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:220">Attribute</th>
                    <th data-options="field:'status',width:60,align:'center'">Status</th>
                </tr>
            </thead>
        </table>
        <div style="margin:10px 0;">
            <span>Selection Mode: </span>
            <select οnchange="$('#dg').datagrid({singleSelect:(this.value==0)})">
                <option value="0">Single Row</option>
                <option value="1">Multiple Rows</option>
            </select><br />
            SelectOnCheck: <input type="checkbox" checked οnchange="$('#dg').datagrid({selectOnCheck:$(this).is(':checked')})"><br />
            CheckOnSelect: <input type="checkbox" checked οnchange="$('#dg').datagrid({checkOnSelect:$(this).is(':checked')})">
        </div>
    </body>
</html>

展开阅读全文

没有更多推荐了,返回首页