时间戳

首页 > 技术文章 > C# .net中DatailsView的JS简易版

C# .net中DatailsView的JS简易版

loushuibazi 2014-08-01 08:26 原文

话不多说，先看效果图

 

此图为最基本的效果，传入DataTable，直接读取第一条数据

设置了标题

设置了显示的列

针对需要处理的列，增加了回调函数控制，让用户自己写处理事件

将指定的列显示为图片

 

一下两个图为为列绑定了单击事件的回调，将列名以及列值返回

 

 

贴上代码，各位高手，提点意见

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CameraFaultInfo.aspx.cs"
    Inherits="ChildrenPageFolder_Video_Page_CameraFaultInfo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <base target="_self" />
    <title>故障详情</title>
    <script src="../../js/MyCreateJS/JS_DetailsView.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        function LoadInfo() {
            // 获取后台数据，DataTable类型
            var dt = ChildrenPageFolder_Video_Page_CameraFaultInfo.LoadCameraFaultInfomation(document.getElementById("hf_cf_id").value).value;

            if (dt != null) {
                // 显示标题
                DatailsView.Opration.TableTitle = "这里是标题勒";
                // 显示哪些字段，每个字段对应的中文名
                DatailsView.Opration.Fields = "CF_ID:ID：;CF_CAMERAID:视频名称：;CF_TYPE:故障类型：;CF_REMARK:备注：;CF_IMAGENAME:图片名称：;CF_CREATEUSERNAME:创建者：;CF_CREATEUSERID:创建者ID：;CF_CREATETIME:创建时间：;CF_STATE:处理状态：;CF_IMAGEPATH:图片地址：";
                // 设置需要在加载时二次编辑的字段
                DatailsView.Opration.SetEditColumnWhenLoad("CF_STATE,CF_CAMERAID", DicEdit);
                // 设置需要显示为图片的字段
                DatailsView.Opration.SetImageColumnWhenLoad("CF_IMAGEPATH");
                // 设置需要点击触发的字段，并设置回调函数
                DatailsView.Opration.SetColumnWhenClick("CF_IMAGEPATH,CF_CREATETIME", ClickCallback);
                // 加载数据详情
                DatailsView.Opration.LoadData("div_CameraFaultInfo", dt);
            } else {
                alert("视频故障信息有误，请重新链接该页面。");
            }

        }

        function DicEdit(colName, colValue) {
            switch (colName) {
                case "CF_STATE":
                    return colValue == 1 ? "已处理" : "未处理";
                    break;
                case "CF_CAMERAID":
                    return colValue;
                    break;
            }
        }


        function ClickCallback(colName, colValue) {
            alert(colName + "：" + colValue);
        }

    </script>
</head>
<body onload="LoadInfo()">
    <form id="form1" runat="server">
    <asp:HiddenField ID="hf_cf_id" runat="server" Value="" />
    <div id="div_CameraFaultInfo">
    </div>
    </form>
</body>
</html>

 

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

public partial class ChildrenPageFolder_Video_Page_CameraFaultInfo : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        AjaxPro.Utility.RegisterTypeForAjax(typeof(ChildrenPageFolder_Video_Page_CameraFaultInfo));
        string cf_id = Request.QueryString["cf_id"] != null ? Request.QueryString[""].ToString() : "";
        this.hf_cf_id.Value = "4a14c6001a03458e980c04de393d8d59";
    }

    /// <summary>
    /// 加载视频故障详情
    /// </summary>
    /// <param name="cf_id"></param>
    [AjaxPro.AjaxMethod]
    public DataTable LoadCameraFaultInfomation(string cf_id)
    {
        string sql = "select * from camera_fault t where t.cf_id = '" + cf_id + "'";
        return DataAccessManager.GetDataTable(sql, "PGISAPP");
    }

}

 

/**
基本信息说明
author <Jeevan>
email <jia.wang_vip@foxmail.com>
date 2014年7月30日17:04:40
**/

var DatailsView = {};

DatailsView.Opration = (function () {
    /// <summary>
    /// 1
    /// </summary>
    var LoadDatails = {

        // 表格的样式
        css_Table: "font-size: 14px; width:450px;",
        css_td_Title: "text-align: center; font-size:20px;font-weight:bold;",
        css_TR1: "color: #000000;background-color: #ffffee;",
        css_TR2: "color: #993300;background-color: #ffffaa;",
        css_TRmove: "color: #123456;background-color: #eaa;",
        css_colTitle: "width:100px; text-align:right;",
        css_colValue: "width:350px;",

        // 设置需要初始化的变量
        TableTitle: "",                 // 显示的标题
        SetTableTile: function (title) {
            /// <summary>
            /// 设置显示的标题
            /// </summary>
            /// <param name="title" type="String">标题的名称</param>
            this.TableTitle = title;
        },
        Fields: "",
        SetFields: function (fields) {
            /// <summary>
            /// 需要显示的字段，表列名
            /// </summary>
            /// <param name="fields" type="String">格式：列名:中文名;列名:中文名;列名:中文名</param>
        },
        // 二次编辑字段
        EditColumn: "",
        EditColumnCallBack: null,
        SetEditColumnWhenLoad: function (columns, callback) {
            /// <summary>
            /// 设置需要二次处理的字段，如数据为1，但需要显示为已处理，该方法完成
            /// 返回该列名、值给回调方法
            /// </summary>
            /// <param name="columns" type="String">列名：格式  列名1,列名2</param>
            /// <param name="callback" type="function">回调的处理方法</param>
            this.EditColumn = columns;
            this.EditColumnCallBack = callback;
        },
        // 设置需要显示为图片的链接
        ImageColumn: "",
        SetImageColumnWhenLoad: function (columns) {
            /// <summary>
            /// 设置需要显示为图片的字段，该字段无处理过程，直接给图片赋值显示
            /// </summary>
            /// <param name="columns" type="String">格式：列名,列名,列名</param>
            this.ImageColumn = columns;
        },
        // 设置当点击的时候，需要回调的字段
        ClickColumn: "",
        ClickColumnWhenClick: null,
        SetColumnWhenClick: function (columns, callback) {
            /// <summary>
            /// 设置点击时需要触发事件的字段(会在回调函数里面返回该字段的列名以及值)
            /// </summary>
            /// <param name="columns" type="String">点击时触发的字段，格式：列名,列名,列名</param>
            /// <param name="callback" type="function">点击的回调方法，会在该函数里面返回该字段的列名以及值</param>
            this.ClickColumn = columns;
            this.ClickColumnWhenClick = callback;
        },

        LoadData: function (divId, dt) {
            /// <summary>
            /// 通过传入DIV的ID以及DataTable类型数据进行数据加载
            /// </summary>
            /// <param name="divId" type="String">DIV的ID</param>
            /// <param name="dt" type="DataTable">C#中DataTable类型</param>
            if (dt != null && dt != undefined && dt.Rows.length > 0) {

                // 准备好显示的字段跟对应的字段绑定的值
                var cn_col = new Array();
                var en_col = new Array();
                if (this.Fields.split(";").length > 0 && this.Fields != "") {
                    var temArr = this.Fields.split(";");
                    for (var i = 0; i < temArr.length; i++) {
                        en_col.push(temArr[i].split(":")[0]);
                        cn_col.push(temArr[i].split(":")[1]);
                    }
                } else {
                    for (var i = 0; i < dt.Columns.length; i++) {
                        en_col.push(dt.Columns[i].Name);
                    }
                    cn_col = en_col;
                }


                // 显示标题
                var thead = null;
                if (this.TableTitle != "") {
                    thead = document.createElement("thead");
                    var tr = document.createElement("tr");
                    var td = document.createElement("td");
                    td.colSpan = "2";
                    td.style.cssText = this.css_td_Title;
                    td.innerHTML = this.TableTitle;
                    tr.appendChild(td);
                    thead.appendChild(tr);
                }


                // 读取数据来显示
                var tbody = document.createElement("tbody");
                for (var i = 0; i < en_col.length; i++) {
                    // 取出标题跟对应的值
                    var columnName = en_col[i];
                    var title = cn_col[i];
                    var value = dt.Rows[0][columnName];
                    // 创建td对象
                    var tdTitle = document.createElement("td");
                    tdTitle.innerHTML = title;
                    tdTitle.style.cssText = this.css_colTitle;
                    var tdValue = document.createElement("td");


                    var tdContentObject = null;
                    if (this.EditColumn.indexOf(columnName) > -1) {
                        // 如果正在执行的字段为需要二次编辑的字段，则通过回调给客户进行二次编辑
                        var span = document.createElement("span");
                        span.innerHTML = this.EditColumnCallBack(en_col[i], value);
                        tdContentObject = span;
                    }
                    if (this.ImageColumn.indexOf(columnName) > -1) {
                        // 判断该字段是否需要显示为图片
                        if (value != null) {
                            var imageObj = document.createElement("image");
                            imageObj.src = value;
                            imageObj.width = 100;
                            imageObj.height = 100;
                            tdContentObject = imageObj;
                        }
                    }
                    if (this.ClickColumn.indexOf(columnName) > -1) {
                        // 判断该字段是否需要点击事件
                        if (tdContentObject == null) {
                            var span = document.createElement("span");
                            span.innerHTML = value;
                            tdContentObject = span;
                        }
                        tdContentObject.setAttribute("colName", columnName);
                        tdContentObject.setAttribute("colValue", value);
                        tdContentObject.onclick = function () { ColumnClickEvent(this); }
                    }

                    if (tdContentObject == null) {
                        var span = document.createElement("span");
                        span.innerHTML = value;
                        tdContentObject = span;
                    }

                    tdValue.appendChild(tdContentObject);

                    tdValue.style.cssText = this.css_colValue;
                    tdValue.style.wordBreak = "break-all";
                    // 创建行
                    var tr = document.createElement("tr");
                    if (i % 2 == 1) { tr.style.cssText = this.css_TR1; } else { tr.style.cssText = this.css_TR2; }
                    tr.setAttribute("trNowClass", tr.style.cssText);
                    tr.onmouseover = function () { this.style.cssText = DatailsView.Opration.css_TRmove; }
                    tr.onmouseout = function () { this.style.cssText = this.getAttribute("trNowClass"); }

                    // td添加到tr，tr添加到tbody
                    tr.appendChild(tdTitle);
                    tr.appendChild(tdValue);
                    tbody.appendChild(tr);
                }

                var table = document.createElement("table");
                table.style.cssText = this.css_Table;
                if (thead != null) { table.appendChild(thead); }
                table.appendChild(tbody);
                document.getElementById(divId).appendChild(table);
            }
        }

    };


    function ColumnClickEvent(obj) {
        /// <summary>
        /// 点击事件的回发
        /// </summary>
        /// <param name="obj" type="Object">返回的td中的对象</param>
        DatailsView.Opration.ClickColumnWhenClick(obj.getAttribute("colName"), obj.getAttribute("colValue"))
    }
    function trMouseEvent(trObj) {
        /// <summary>
        /// 行悬浮事件
        /// </summary>
        /// <param name="trObj" type="Object">tr对象</param>
        trObj.style.cssText = CommonJS.HtmlTableOperation.trMouseCss;
    }
    function trOutEvent(trObj) {
        /// <summary>
        /// 行离开事件
        /// </summary>
        /// <param name="trObj" type="Object">tr对象</param>
        trObj.style.cssText = trObj.getAttribute("trNowClass");
    }

    return LoadDatails;

})();

 

简单的汇总一下功能：

1.读取DataTable第一列的值，并显示

2.自定义设置标题

3.自定义绑定列

4.自定义列的数据处理加载的处理事件

5.自定义列为图片显示

6.自定义列的点击事件

7.行的样式自定义

 

JS代码中，每个方法里面我都写了

/// <summary>
            /// 设置点击时需要触发事件的字段(会在回调函数里面返回该字段的列名以及值)
            /// </summary>
            /// <param name="columns" type="String">点击时触发的字段，格式：列名,列名,列名</param>
            /// <param name="callback" type="function">点击的回调方法，会在该函数里面返回该字段的列名以及值</param>

该功能的主要作用是在客户调用的时候，增加的提示的功能，JS智能提示
http://visualstudiogallery.msdn.microsoft.com/872d27ee-38c7-4a97-98dc-0d8a431cc2ed/

有空大伙可以看看，写的时候麻烦了点，但是调用的时候就方便多了

 

如果转载，请添加转载说明，本人为自创，谢谢！

http://www.cnblogs.com/loushuibazi/

 

推荐阅读