DataV——UMD版应用实例—轮播表

susan花雨

已于 2022-03-15 16:05:23 修改

阅读量1.3k

点赞数

分类专栏： # 大屏 web前端 # asp.net 文章标签： ui ajax

于 2022-03-08 18:55:37 首次发布

本文链接：https://blog.csdn.net/qq_42711010/article/details/123360323

版权

web前端同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

asp.net

7 篇文章 1 订阅

订阅专栏

大屏

2 篇文章 0 订阅

订阅专栏

记录DataV用ajax绑定数据——轮播表实例
代码
aspx页面

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="CentralControlRoom.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
     <script src="Vue/js/vue.js"></script>
  <!--调试版-->
  <script src="Vue/js/datav.map.vue.js"></script>
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="demo">
    <dv-scroll-board :config="config" style="width:500px;height:220px" ></dv-scroll-board>
  </div>
  <script>
      //var app = new Vue({
      //    el: '#demo',
      //    data: {
      //        config: {
      //            header: ['设备名称', '异常名称', '报警状态'],
      //            data: [
      //     ['行1列1', '行1列2', '行列3'],
      //     ['行2列1', '行2列2', '行2列3'],
      //     ['行3列1', '行3列2', '行3列3'],
      //     ['行4列1', '行4列2', '行4列3'],
      //     ['行5列1', '行5列2', '行5列3'],
      //     ['行6列1', '行6列2', '行6列3'],
      //     ['行7列1', '行7列2', '行7列3'],
      //     ['行8列1', '行8列2', '行8列3'],
      //     ['行9列1', '行9列2', '行9列3'],
      //     ['行10列1', '行10列2', '行10列3']
      //            ],                                    
      //            index:true,
      //            columnWidth:[50],
      //            align:['center'] ,
      //            //headerBGC:"#2a5caa", //表头背景色 
      //            carousel: 'page',
      //    }
      //}     
      //})
      var app = new Vue({
          el: '#demo',
          data: {
              config: {
                  header: ['设备名称', '异常名称', '报警状态'],
                  data: [],
                  index:true,
                  columnWidth:[50],
                  align:['center'] ,
                  //headerBGC:"#2a5caa", //表头背景色 
                  carousel: 'page',                
                  indexHeader:'序号',                 
                  //headerBGC: '#eb5a6d', // 表头背景色
                  //oddRowBGC: '#FFF', // 奇数行背景色
                  //evenRowBGC: '#f5f5f5', // 偶数行背景色
                  //waitTime: 2000, // 轮播时间间隔(ms)                                 
              }
          },
          mounted: function () {
              var self = this  //把ajax外的this复制给_this,这样_this就指向vue对象了
              //setInterval(function () {
              $.ajax({
                  url: 'WebForm1.aspx?action=NowHourAlm',
                  type: 'post',
                  dataType: 'json',
                  async: false,
                  cache: false,
                  timeout: 3,
                  success: function (res) {
                      var arr = []
                      var Machine_name = [];
                      var Adress_name = [];
                      var Data = [];
                      for (var i = 0; i < res.length; i++) {                         
                           Machine_name[i]=res[i]["Machine_name"];
                           Adress_name[i] = res[i]["Adress_name"];
                           Data [i]=res[i]["Data"];
                           arr.push([Machine_name[i], Adress_name[i], Data[i]])
                      }
                      console.log(Machine_name);
                      console.log(Adress_name);
                      console.log(Data);
                      console.log(arr);
                      //var nowData = self.config
                      //nowData.data = arr                                                                               
                      //self.$data.config.data = arr;
                        self.config = {
                              header: ['设备名称', '异常名称', '报警状态'],
                              data: [],
                              index: true,
                              columnWidth: [50],
                              align: ['center'],                                          
                              indexHeader: '序号',
                              data: arr
                          }
                  }
              });
              //}, 10000);             
          },                                
      });
  </script>
    </form>
</body>
</html>

cs代码

using CentralControlRoom.cs;
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace CentralControlRoom
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        SearchShow Show = new SearchShow();
        string action = "";
        public string Line = "C01";
        protected void Page_Load(object sender, EventArgs e)
        {
            action = Request["action"] == null ? "" : Request["action"];
            switch (action)
            {
                case "NowHourAlm"://当前每小时报警   
                    NowHourAlm();
                    break;
            }
              
        }
              /// <summary>
        /// 当天当前小时报警信息
        /// </summary>
        private void NowHourAlm()
        {
            DataTable dr = Show.f8(Line);
            if (dr != null)
            {
                if (dr.Rows.Count != 0)
                {
                    string strJson = ToJson(dr);

                    WriteJson(strJson);
                }
            }
        }
         public static string ToJson(object obj)
        {
            return NewtonsoftJson(obj);
        }
        public static string NewtonsoftJson(object obj)
        {
            return Newtonsoft.Json.JsonConvert.SerializeObject(obj, Newtonsoft.Json.Formatting.None);
        }

        private static void WriteJson(string str)
        {
            HttpContext.Current.Response.Write(str);
            //HttpContext.Current.Response.ContentType = "text/plain"; //设置MIME格式
            HttpContext.Current.Response.End();
        }
    }

}