前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >cssjshtml kendoui 前后台数据交互

cssjshtml kendoui 前后台数据交互

作者头像
葫芦
发布2019-04-17 14:40:03
9840
发布2019-04-17 14:40:03
举报
文章被收录于专栏:葫芦葫芦

 django+kendoui 远端数据交互展示:

kendoui grid 带分页远端数据交互

django:

代码语言:javascript
复制
def gettnm2(request): 
    result=[{'tnm2_time':0000000,'service':'11','operator':'ww','level':12,'ci_name':2222,'alarm_content':22,'recover_time':23},
            {'tnm2_time':99,'service':'23','operator':'ww','level':12,'ci_name':2222,'alarm_content':22,'recover_time':23}]
    result.extend(result)
    result.extend(result)
    result.extend(result)
    result.extend(result)
    result.extend(result)
    return JsonResponse(result, safe=False)

html:

代码语言:javascript
复制
<input type="text" id="start_time" placeholder="开始时间">
<input type="text" id="end_time" placeholder="结束时间">
<div id="detail-table" class="mb30 demo">

javascript:

代码语言:javascript
复制
<script type="text/javascript">
        //kendoui-table
        var ds = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/gettnm2/",
                    dataType: "json",
                    type: "POST",
                }
            }
        });
            $('#detail-table').kendoGrid({
            height: 400, //设置高度,超过显示滚动条
            sortable: true, //表头排序
            filterable: true,
                        pageable: {
                        refresh: true,
                        buttonCount: 5,
                        pageSizes: [20, 50, 100]
                    },
            dataSource: ds,
            columns: [
                {
                    field: 'tnm2_time',
                    title: '告警时间'
                },
                {
                    field: 'service',
                    title: '系统'
                },
                {
                    field: 'operator',
                    title: '负责人'
                }, {
                    field: 'level',
                    title: '级别'
                }, {
                    field: 'ci_name',
                    title: 'IP'
                },
                {
                    field: 'alarm_content',
                    title: '详情'
                }, {
                    field: 'recover_time',
                    title: '恢复时间'
                }, {
                    field: '进度',
                    title: '处理进度',
                    width: 150,
                    template: "<button type=\"button\" class=\"king-btn king-info\">处理</button>\n"
                }
            ],
        });
        $("#start_time").kendoDateTimePicker({
            value: new Date(),
            format: "yyyy-MM-dd hh:mm:ss"

        });
        var curDate = new Date();

        $("#end_time").kendoDateTimePicker(
            {

                value: new Date(curDate.getTime() + 24 * 60 * 60 * 1000),
                format: "yyyy-MM-dd hh:mm:ss"
            });
        $('.king-info').click(function () {
            var start_time = $('#start_time').val();
            var end_time = $('#end_time').val();
            ds.read({start_time: start_time, end_time: end_time});
        });
    </script>

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018/10/21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  •  django+kendoui 远端数据交互展示:
  • django:
  • html:
  • javascript:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档