学习笔记

最新推荐文章于 2024-04-24 09:22:16 发布

woboxp

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量250

点赞数

文章标签： javascript css html5 jquery css3

本文链接：https://blog.csdn.net/woboxp/article/details/104790067

版权

JavaScript

JQuery

Ajax

JSON

###2/20/2020 9:44:49 PM

后台 C#.net读取出数据表，转成json，成功传递到前台js，并正常显示。
下一步与前台的js之间json数据的传输

Bootstrap

###问题：在bootstrap table中的分页按钮和分列显示按钮无响应。

###解决：加上popper.js引用，并且要在bootstrap.js之前引用，如下：

详见：E:\study\报名系统html5\teacher\02_form data.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>    
    <link href="bootstrap-4.4.1-dist/css/bootstrap.min.css"  rel="stylesheet">
    <link href="bootstrap-table-master/dist/bootstrap-table.min.css" rel="stylesheet">  
    <link href="fontawesome-free-5.12.1-web/css/all.css" rel="stylesheet">   
</head>
<body>
  <div id="toolbar">
    <button id="remove" class="btn btn-danger" disabled>
      <i class="glyphicon glyphicon-remove"></i> Delete
    </button>
  </div>
  <table id="table"
        data-toolbar="#toolbar"
        data-search="true"
        data-show-columns="true"
        data-show-columns-toggle-all="true"
        data-show-export="true"
        data-show-refresh="true"
        data-pagination="true"
        data-page-list="[10, 25, 50, 100, all]"
        data-id-field="eroll_number"
        data-show-footer="true"
        data-response-handler="responseHandler"
  >
    <thead>
      <tr>
        <th data-field="eroll_number" data-switchable="true">报名序号</th> 
        <th data-field="child_name">姓名</th> 
        <th data-field="identity_number">身份证</th>
        <th data-field="gender">性别</th>
        <th data-field="telephone">联系电话</th>
        <th data-field="father_name">父亲姓名</th>
        <th data-field="father_id_number">父亲身份证</th>
        <th data-field="mother_name">母亲姓名</th>
        <th data-field="mother_id_number">母亲身份证</th>                              
        <th data-field="child_address">地址</th>
      </tr>
    </thead>
  </table>  
  
</body>
</html>

<script src="jquery-3.4.1.js"></script>
<script src="vendor/popper.js/umd/popper.js"></script>
<script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>      
<script src="bootstrap-table-master/dist/bootstrap-table.min.js"></script>
<script src="bootstrap-table-master/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<script> 
  var $table = $('#table')
  $(function() {
      $.get(
            "showtable.ashx",                
            function(data){     
                //transform json data format to jquery data format
                var obj=eval("("+data+")"); 
                //load and show data in table by use boottable                 
                $table.bootstrapTable({data: obj})                
            }
            );      
    })  
</script>

ajax响应文件：E:\study\报名系统html5\teacher\showtable.ashx

<%@ WebHandler Language="C#" Class="aj06" %>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Web.Configuration;
using System.Data;
using System.Drawing;
using System.Text;

public class aj06 : IHttpHandler {

public void ProcessRequest (HttpContext context) {
    
    
    context.Response.ContentType = "text/plain";
    

    //读取数据库所有记录
    //Int32 status = 0;
    String Str = System.Configuration.ConfigurationManager.AppSettings["StrConAPP"];
    SqlConnection MyCon = new SqlConnection(Str);
    MyCon.Open();    
    SqlConnection conn = new SqlConnection(Str);
    string strSql = "SELECT area_code,eroll_number,child_name,child_birthday,gender,identity_number,child_address,father_name,father_id_number,mother_name,mother_id_number,telephone,remark FROM View_bm_报名信息视图 where if_valid=1 order by eroll_number";
    SqlDataAdapter da = new SqlDataAdapter(strSql, conn);
    DataSet ds = new DataSet();//创建DataSet实例   
    da.Fill(ds);
    DataTable dtJMB = ds.Tables[0];
    string jmbData = DataTableToJson(dtJMB);
    context.Response.Write(jmbData);   
}

public bool IsReusable {
    get {
        return false;
    }
}


/// <summary>

/// table转json

/// </summary>

/// <param name="dt"></param>

/// <returns></returns>

public static string DataTableToJson(DataTable dt)
{

    StringBuilder jsonBuilder = new StringBuilder();

  //jsonBuilder.Append("{\"bm\":");

   jsonBuilder.Append("[");
    
    //jsonBuilder.Append("[");

    for (int i = 0; i < dt.Rows.Count; i++)
    {

        jsonBuilder.Append("{");

        for (int j = 0; j < dt.Columns.Count; j++)
        {

            jsonBuilder.Append("\"");

            jsonBuilder.Append(dt.Columns[j].ColumnName);

            jsonBuilder.Append("\":\"");

            jsonBuilder.Append(dt.Rows[i][j].ToString().Replace("\"", "\\\""));

            jsonBuilder.Append("\",");

        }

        jsonBuilder.Remove(jsonBuilder.Length - 1, 1);

        jsonBuilder.Append("},");

    }

    jsonBuilder.Remove(jsonBuilder.Length - 1, 1);

    jsonBuilder.Append("]");

    //jsonBuilder.Append("}");

    return jsonBuilder.ToString();

}


/// <summary>

/// dataset转Json

/// </summary>

/// <param name="ds"></param>

/// <returns></returns>

public static string DatasetToJson(System.Data.DataSet ds)
{

    StringBuilder json = new StringBuilder();

    json.Append("{\"Tables\":");

    json.Append("[");

    foreach (System.Data.DataTable dt in ds.Tables)
    {

        json.Append(DataTableToJson(dt));

        json.Append(",");

    }

    json.Remove(json.Length - 1, 1);

    json.Append("]");

    json.Append("}");

    return json.ToString();

}

}

###问题：点击刷新按钮，显示数据
###解决：找到刷新按钮的点击事件，先销毁表格，再重新加载数据。
详见：（E:\study\报名系统html5\teacher\02 刷新按钮显示table.html）

//刷新按钮响应的事件
$('#table').on("refresh.bs.table", function() {
    //先销毁表格
    $('#table').bootstrapTable('destroy');
    //再重新获取数据
    $.get(
            "showtable.ashx",                
            function(data){               
                var obj=eval("("+data+")");                             
                $table.bootstrapTable({data: obj})                 
            }
        );   
})

###问题：显示导出按钮，并实现导出功能
###解决：table中加上属性
详见：E:\study\报名系统html5\teacher\02export.html

data-show-export="true"
data-export-Data-Type="all"
//js文件也要引入
<script src="js/tableexport.min.js"></script>

###问题：身份证字段导出后默认科学计数法格式，转文本后，后三位丢失为0
###解决：修改tableexport.js （781-784行），引用文件也改成 tableexport.js
if (typeof tdcss === ‘undefined’ && typeof defaults.mso.onMsoNumberFormat === ‘function’)
tdcss = defaults.mso.onMsoNumberFormat(cell, row, col);
//增加下面一行
else tdcss = ‘\@’;

###问题：集成刷新、导出功能，精简代码
###解决：通过自定义函数（tableini），用于加载table数据
方法一：详见：E:\study\报名系统html5\teacher\0202export-identityformat.html

<script> 
    var $table = $('#table');
    var obj;
    $(function() {        
        $tableini();             
    })    

    //点击刷新按钮
    $table.on("refresh.bs.table", function() {
        //先销毁表格
        $table.bootstrapTable('destroy');
        //再重新获取数据
        $tableini();          
    })

    //自定义函数tableini，用于加载table数据
    $tableini=function(){
        $.get(
                "showtable.ashx",                
                function(data){               
                    var obj=eval("("+data+")");                             
                    $table.bootstrapTable({data: obj})                 
                }
            );   
    }
</script>

方法二：用load方法加载，作用是先删除原table数据，然后重新加载新数据

$table.on("refresh.bs.table", function() {
  $.get(
      "showtable.ashx",                
      function(data){               
        var obj=eval("("+data+")");     
        //用load方法，先删除表数据，再重新加载新数据                        
        $table.bootstrapTable('load',obj)                 
      }
    );        
})

###问题：修改选中行数据（行间修改）

woboxp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习笔记

JavaScriptJQueryAjaxJSON###2/20/2020 9:44:49 PM后台 C#.net读取出数据表，转成json，成功传递到前台js，并正常显示。下一步与前台的js之间json数据的传输Bootstrap###问题：在bootstrap table中的分页按钮和分列显示按钮无响应。###解决：加上popper.js引用，并且要在bootstrap....
复制链接

扫一扫