easy ui datagrid 数据绑定

1.前台页面

复制代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../../../EasyUI/themes/default/easyui.css" rel="stylesheet" />
    <link href="../../../EasyUI/demo/demo.css" rel="stylesheet" />
    <link href="../../../EasyUI/themes/icon.css" rel="stylesheet" />
    <script src="../../../EasyUI/jquery.min.js"></script>
    <script src="../../../EasyUI/jquery.easyui.min.js"></script>

    <script>
        $(document).ready(function () {
            $('#list').datagrid({
                title: '统计 报表',
                iconCls: 'icon-save',
                width: 800,
                height: 250,
                url: "datagrid.js",
                method:'get',
                columns: [[
                { title: '统计', colspan: 6 },
                {
                    field: 'OID', title: '标题', width: 100, align: 'center', rowspan: 2,

                }
                ], [
                        { field: 'oid', title: '订单ID', width: 100 },
                        { field: 'Indate', title: '入住日期', width: 100, align: 'right' },
                        { field: 'outdate', title: '离店日期', width: 100, align: 'left' },
                        { field: 'roomnum', title: '房间数', width: 100 },
                        { field: 'price', title: '价格', width: 100 },
                        { field: 'pricecb', title: '成本价格', width: 100 }
                ]],
                pagination: true,
                rownumbers: true
            });
        }
     );
    </script>
</head>
<body>
    <table id="list"></table>
</body>
</html>
复制代码

2.data

{"total":100,"rows":[{"ID":"7","OID":"17","HotelID":"57","RoomTypeID":"216","SourceCID":"1","CID":"1","Indate":"2010-9-11 0:00:00","Price":"","THPrice":"","RoomNum":"1","PriceCB":"","PriceAC":"","HotelStatus":"0","SourceStatus":"0","CusPriceAC":"","RoomIn":"0","PrivataRoom":"0","CusPrice":"0","CUsID":"1","InStatus":"","OutStatus":"","InMoney":"","OutMoney":"","TableName":"T_OrderRoom"},{"ID":"202","OID":"67","HotelID":"57","RoomTypeID":"579","SourceCID":"1","CID":"1","Indate":"2010-10-7 0:00:00","Price":"825","THPrice":"660","RoomNum":"1","PriceCB":"700","PriceAC":"660","HotelStatus":"0","SourceStatus":"0","CusPriceAC":"","RoomIn":"0","PrivataRoom":"0","CusPrice":"0","CUsID":"1","InStatus":"","OutStatus":"","InMoney":"","OutMoney":"","TableName":"T_OrderRoom"}]}

3.说明

 method:'get', 在请求时需要

 

posted @   秋风过、枯叶落  阅读(2072)  评论(0)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
点击右上角即可分享
微信分享提示
AI IDE Trae