搭建简易jqueryeasyui环境

最新推荐文章于 2022-05-20 18:14:41 发布

qq_31459039

最新推荐文章于 2022-05-20 18:14:41 发布

阅读量193

点赞数

分类专栏： jqueryeasyui

本文链接：https://blog.csdn.net/qq_31459039/article/details/79108567

版权

jqueryeasyui 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!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">
    <meta name="keywords" content="jquery,ui,easy,easyui,web">
    <meta name="description" content="easyui help you build your web page easily!">
    <title>jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
    <script>
        var products = [
            {productid: 'FI-SW-01', name: 'Koi'},
            {productid: 'K9-DL-01', name: 'Dalmation'},
            {productid: 'RP-SN-01', name: 'Rattlesnake'},
            {productid: 'RP-LI-02', name: 'Iguana'},
            {productid: 'FL-DSH-01', name: 'Manx'},
            {productid: 'FL-DLH-02', name: 'Persian'},
            {productid: 'AV-CB-01', name: 'Amazon Parrot'}
        ];
        function formatProduct(value) {
            for (var i = 0; i < products.length; i++) {
                if (products[i].productid == value) return products[i].name;
            }
            return value;
        }
        $(function () {
            $('#tt').datagrid({
                onLoadSuccess: function () {
                    var merges = [{
                        index: 2,
                        rowspan: 2
                    }, {
                        index: 5,
                        rowspan: 2
                    }, {
                        index: 7,
                        rowspan: 2
                    }];
                    for (var i = 0; i < merges.length; i++)
                        $('#tt').datagrid('mergeCells', {
                            index: merges[i].index,
                            field: 'productid',
                            rowspan: merges[i].rowspan
                        });
                }
            });
        });
    </script>
</head>
<body>
<h1>Merge Cells for DataGrid</h1>

<table id="tt" title="Merge Cells" style="width:550px;height:250px"
       url="data/datagrid_data.json"
       singleSelect="true" iconCls="icon-save" rownumbers="true"
       idField="itemid" pagination="true">
    <thead frozen="true">
    <tr>
        <th field="productid" width="80" formatter="formatProduct">Product ID</th>
        <th field="itemid" width="100">Item ID</th>
    </tr>
    </thead>
    <thead>
    <tr>
        <th colspan="2">Price</th>
        <th rowspan="2" field="attr1" width="150">Attribute</th>
        <th rowspan="2" field="status" width="60" align="center">Stauts</th>
    </tr>
    <tr>
        <th field="listprice" width="80" align="right">List Price</th>
        <th field="unitcost" width="80" align="right">Unit Cost</th>
    </tr>
    </thead>
</table>

</body>
</html>

qq_31459039

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
搭建简易jqueryeasyui环境

<!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; chars...
复制链接

扫一扫