dataTable Demo

最新推荐文章于 2021-08-26 11:26:09 发布
最新推荐文章于 2021-08-26 11:26:09 发布
阅读量1.5k 收藏
点赞数
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012260672/article/details/77101948
版权 

<!-- <!doctype html>
<html>
<head>
<title>Cesium</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
body {
    font-family: sans-serif;
}

dt {
    margin-top: 7px;
}

dd {
    margin-top: 7px;
}

li {
    margin-top: 3px;
}

ul {
    list-style-type: none;
}
</style>
</head>
<body>
  <div>
    <img src="Apps/Sandcastle/images/Cesium_Logo_Color_Overlay.png" style='width: 400px' />
    <ul>
      <li><b>Local links</b>
        <dl>
          <dt>
            <a href="Build/Documentation/index.html">Documentation</a>
          </dt>
          <dd>The complete API documentation and reference.</dd>
          <dt>
            <a href="Apps/HelloWorld.html">Hello World</a>
          </dt>
          <dd>
            The simplest possible Cesium application.
          </dd>
          <dt>
            <a href="Apps/CesiumViewer/index.html">Cesium Viewer</a>
          </dt>
          <dd>
            A simple Cesium reference application which allows you to browse the globe and select from a variety of imagery and terrain
            layers as well as load CZML, GeoJSON, and other formats supported by Cesium.
          </dd>
          <dt>
            <a href="Apps/Sandcastle/index.html">Sandcastle</a>
          </dt>
          <dd>Cesium's live code editor and example gallery. Browse examples highlighting features of the Cesium API and edit and run
            them all in your web browser. Cesium applications created in Sandcastle can even be saved and downloaded.</dd>
        </dl>
      <li><b>Unit Tests</b>
        <dl>
          <dt>
            <a href="Specs/SpecRunner.html">Run all tests</a>
          </dt>
          <dt>
            <a href="Specs/SpecRunner.html?webglValidation">Run with WebGL validation</a>
          </dt>
          <dt>
            <a href="Specs/SpecRunner.html?webglStub">Run with WebGL stub</a>
          </dt>
          <dt>
            <a href="Specs/SpecRunner.html?category=none">Select a test to run</a>
          </dt>
          <dt>
            <a href="Specs/SpecRunner.html?category=WebGL">Run only WebGL tests</a>
          </dt>
          <dt>
            <a href="Specs/SpecRunner.html?category=All&amp;not=WebGL">Run only non-WebGL tests</a>
          </dt>
        </dl></li>
      <li><b>External links</b>
        <dl>
          <dt>
            <a href="//cesiumjs.org">Homepage</a>
          </dt>
          <dd>The official Cesium homepage</dd>
          <dt>
            <a href="//cesiumjs.org/tutorials.html">Tutorials</a>
          </dt>
          <dd>Step by step guides for learning to use Cesium</dd>
          <dt>
            <a href="//cesiumjs.org/forum.html">Forum</a>
          </dt>
          <dd>Our forum and mailing list, questions and feedback welcome from all skill levels</dd>
          <dt>
            <a href="//github.com/AnalyticalGraphicsInc/cesium">GitHub</a>
          </dt>
          <dd>The official Cesium GitHub repository</dd>
          <dt>
            <a href="//cesiumjs.org/demos.html">Showcases</a>
          </dt>
          <dd>Demos and information about projects using Cesium</dd>
          <dt>
            <a href="http://webglreport.com/">WebGL Report</a>
          </dt>
          <dd>Provides technical information about WebGL capabilities supported by your browser</dd>
        </dl></li>
    </ul>
  </div>
  <script type="text/javascript">
      if (window.location.protocol === 'file:') {
          document.body.innerHTML = ""
          document.write('<p><b>This file must be hosted in a web server.</br>');
          document.write('See our <a href="https://cesiumjs.org/2013/04/12/Cesium-up-and-running/">Getting Started</a> ');
          document.write('tutorial for a step-by-step guide.</b></p>');
      }
  </script>
</body>
</html>
 -->

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 此例子是结合bootstrap的Datatables，暂且定位为最基本的例子吧 -->
<!-- 引入必须的css和js文件 -->
  <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" /> 
  <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.css" /> 
  <script src="http://cdn.gbtags.com/datatables/1.10.5/js/jquery.js"></script> 
  <script src="http://cdn.gbtags.com/datatables/1.10.5/js/jquery.dataTables.min.js"></script> 
  <script type="text/javascript" language="javascript" src="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.js"></script> 
 </head>
 <body>


 <div class="domab">
    <div class="" style="float:right;">
        <label>
            模糊查询：
            <input type="text" class="dsearch" placeholder="" aria-controls="example"></label>
    </div>

    <button id="button" style="float:left;">删除选中的行</button>
    <div style="float:left; position:relative; z-index:9999;height:100%;">
        <button class="showcol">列段显示/隐藏</button>
        <ul class="showul"
            style=" list-style:none;display:none; position:absolute; left:80px; top:10px; background:#FFFFFF; border:1px solid #ccc; width:200px;">
            <li>
                <input type="checkbox" class="toggle-vis" data-column="2"/>
                服务器名称
            </li>
            <li>
                <input type="checkbox" class="toggle-vis" data-column="3"/>
                IP
            </li>
            <li>
                <input type="checkbox" class="toggle-vis" data-column="4"/>
                CPU/内存
            </li>
            <li>
                <input type="checkbox" class="toggle-vis" data-column="5"/>
                数据盘大小
            </li>
            <li>
                <input type="checkbox" class="toggle-vis" data-column="6"/>
                操作系统
            </li>
            <li>
                <input type="checkbox" class="toggle-vis" data-column="7"/>
                状态
            </li>
        </ul>
    </div>
    <div style="clear:both;"></div>
</div>
<div class="wt100" style="position:relative; overflow:hidden; height:100%">
    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
        <tr>
            <th style=" width:1px; padding:0"></th>
            <th style="width:30px; padding:10px 0 10px 10px">
                <input type="checkbox" id="checkAll"></th>
            <th>服务器名称</th>
            <th>IP</th>
            <th>CPU/内存</th>
            <th>数据盘大小</th>
            <th>操作系统</th>
            <th>状态</th>
        </tr>
        </thead>

        <tfoot>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        </tfoot>
        <tbody>
        <tr>
            <td></td>
            <td>
                <input type="checkbox" name="checkList"></td>
            <td>
                <a class="clickdom" href="javascript:;" isclick="true" onClick="clickDom(this);">lsqtest</a>
            </td>
            <td>192.168.13.7</td>
            <td>3核/1G</td>
            <td>5G</td>
            <td>CentOS 56.5</td>
            <td>运行中</td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox" name="checkList"></td>
            <td>
                <a class="clickdom" href="javascript:;" isclick="true" onClick="clickDom(this);">lsqtdfest</a>
            </td>
            <td>192.168.136.56</td>
            <td>1核/3G</td>
            <td>3G</td>
            <td>
                <div style="height:21px; line-height:21px; overflow:hidden; width:100px;">CentO核核核核核核核核核核核核核核核核核核核核核vS
                    53.5
                </div>
            </td>
            <td>已停止</td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox" name="checkList"></td>
            <td>
                <a class="clickdom" href="javascript:;" isclick="true" onClick="clickDom(this);">lsfdqtest</a>
            </td>
            <td>192.165.13.56</td>
            <td>1核/16G</td>
            <td>2G</td>
            <td>CentOS 52.5</td>
            <td>运行中</td>
        </tr>

        <tr>
            <td></td>
            <td>
                <input type="checkbox" name="checkList"></td>
            <td>
                <a class="clickdom" href="javascript:;" isclick="true" onClick="clickDom(this);">lsqtest</a>
            </td>
            <td>192.168.13.7</td>
            <td>3核/1G</td>
            <td>5G</td>
            <td>CentOS 56.5</td>
            <td>运行中</td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox" name="checkList"></td>
            <td>
                <a class="clickdom" href="javascript:;" isclick="true" onClick="clickDom(this);">lsqtdfest</a>
            </td>
            <td>192.18.136.56</td>
            <td>1核/3G</td>
            <td>13G</td>
            <td>CentOS 53.5</td>
            <td>已停止</td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox" name="checkList"></td>
            <td>
                <a class="clickdom" href="javascript:;" isclick="true" onClick="clickDom(this);">lsfdqtest</a>
            </td>
            <td>192.165.13.56</td>
            <td>1核/16G</td>
            <td>2G</td>
            <td>CntOS 52.5</td>
            <td>运行中</td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox" name="checkList"></td>
            <td>
                <a class="clickdom" href="javascript:;" isclick="true" onClick="clickDom(this);">lsqtest</a>
            </td>
            <td>192.168.13.7</td>
            <td>3核/1G</td>
            <td>5G</td>
            <td>CentOS 56.5</td>
            <td>运行中</td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox" name="checkList"></td>
            <td>
                <a class="clickdom" href="javascript:;" isclick="true" onClick="clickDom(this);">lsqtdfest</a>
            </td>
            <td>192.168.136.56</td>
            <td>1核/3G</td>
            <td>3G</td>
            <td>CentOS 53.5</td>
            <td>已停止</td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox" name="checkList"></td>
            <td>
                <a class="clickdom" href="javascript:;" isclick="true" onClick="clickDom(this);">aaaaaaaaaaaaaaaaaa</a>
            </td>
            <td>192.165.13.56</td>
            <td>1核/16G</td>
            <td>2G</td>
            <td>CentOS 52.5</td>
            <td>运行中</td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox" name="checkList"></td>
            <td>
                <a class="clickdom" href="javascript:;" isclick="true"
                   onClick="clickDom(this);">bbbbbbbbbbbbbbbbbbbb</a>
            </td>
            <td>192.165.13.56</td>
            <td>1核/16G</td>
            <td>2G</td>
            <td>CentOS 52.5</td>
            <td>运行中</td>
        </tr>

        </tbody>
    </table>
    <div class="showslider">
        <button class="closediv">关闭</button>
    </div>
    <style>
        .showslider {
            width: 80%;
            height: 100%;
            background-color: #fff;
            border: 1px solid #ccc;
            position: absolute;
            top: 9px;
        }

        .addselect {
            border-radius: 2px;
            display: inline-block;
            background-color: #ccc;
            height: 12px;
            width: 16px;
            text-align: center;
            color: #fff;
            font-size: 9px;
            font-family: Arial;
            position: relative;
            margin-left: 4px;
            cursor: pointer;
            overflow: hidden;
            vertical-align: top;
            top: 1px;
        }

        .addselect select {
            width: 44px;
            opacity: 0;
            position: absolute;
            left: 0;
            top: 0;
            cursor: pointer;
        }

        table.dataTable tbody th, table.dataTable th, table.dataTable tbody td {
            font-size: 12px;
            text-align: left;
        }

        table.dataTable thead th {
            padding: 0 8px;
        }
    </style>
</div>

 </body>
 </html>

 <script type="text/javascript">
        $(function () {

           var table = $('#example').DataTable({
               "dom": '<"top"f >rt<"bottom"ilp><"clear">',//dom定位
               "dom": 'tiprl',//自定义显示项
               //"dom":'<"domab"f>',
               "scrollY": "220px",//dt高度
               "lengthMenu": [
                   [8, 6, 8, -1],
                   [4, 6, 8, "All"]
               ],//每页显示条数设置
               "lengthChange": false,//是否允许用户自定义显示数量
               "bPaginate": true, //翻页功能
               "bFilter": false, //列筛序功能
               "searching": true,//本地搜索
               "ordering": true, //排序功能
               "Info": true,//页脚信息
               "autoWidth": true,//自动宽度
               "oLanguage": {//国际语言转化
                   "oAria": {
                       "sSortAscending": " - click/return to sort ascending",
                       "sSortDescending": " - click/return to sort descending"
                   },
                   "sLengthMenu": "显示 _MENU_ 记录",
                   "sZeroRecords": "对不起，查询不到任何相关数据",
                   "sEmptyTable": "未有相关数据",
                   "sLoadingRecords": "正在加载数据-请等待...",
                   "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录。",
                   "sInfoEmpty": "当前显示0到0条，共0条记录",
                   "sInfoFiltered": "（数据库中共为 _MAX_ 条记录）",
                   "sProcessing": "<img src='../resources/user_share/row_details/select2-spinner.gif'/> 正在加载数据...",
                   "sSearch": "模糊查询：",
                   "sUrl": "",
                   //多语言配置文件，可将oLanguage的设置放在一个txt文件中，例：Javascript/datatable/dtCH.txt
                   "oPaginate": {
                       "sFirst": "首页",
                       "sPrevious": " 上一页 ",
                       "sNext": " 下一页 ",
                       "sLast": " 尾页 "
                   }
               },

               "columnDefs": [
                   {
                       orderable: false,

                       targets: 0 },
                   {
                       orderable: false,

                       targets: 1 }
               ],//第一列与第二列禁止排序

               "order": [
                   [0, null]
               ],//第一列排序图标改为默认
               initComplete: function () {//列筛选
                   var api = this.api();
                   api.columns().indexes().flatten().each(function (i) {
                       if (i != 0 && i != 1) {//删除第一列与第二列的筛选框
                           var column = api.column(i);
                           var $span = $('<span class="addselect">▾</span>').appendTo($(column.header()))
                           var select = $('<select><option value="">All</option></select>')
                                   .appendTo($(column.header()))
                                   .on('click', function (evt) {
                                       evt.stopPropagation();
                                       var val = $.fn.dataTable.util.escapeRegex(
                                               $(this).val()
                                       );
                                       column
                                               .search(val ? '^' + val + '$' : '', true, false)
                                               .draw();
                                   });
                           column.data().unique().sort().each(function (d, j) {
                               function delHtmlTag(str) {
                                   return str.replace(/<[^>]+>/g, "");//去掉html标签
                               }

                               d = delHtmlTag(d)
                               select.append('<option value="' + d + '">' + d + '</option>')
                               $span.append(select)
                           });

                       }
                   });

               }

           });

           //添加索引列
           table.on('order.dt search.dt',
                   function () {
                       table.column(0, {
                           search: 'applied',
                           order: 'applied'
                       }).nodes().each(function (cell, i) {
                           cell.innerHTML = i + 1;
                       });
                   }).draw();

           //自定义搜索
           $('.dsearch').on('keyup click', function () {
               var tsval = $(".dsearch").val()
               table.search(tsval, false, false).draw();
           });

           //checkbox全选
           $("#checkAll").on("click", function () {
               if ($(this).prop("checked") === true) {
                   $("input[name='checkList']").prop("checked", $(this).prop("checked"));
                   $('#example tbody tr').addClass('selected');
               } else {
                   $("input[name='checkList']").prop("checked", false);
                   $('#example tbody tr').removeClass('selected');
               }
           });

           //显示隐藏列
           $('.toggle-vis').on('change', function (e) {
               e.preventDefault();
               console.log($(this).attr('data-column'));
               var column = table.column($(this).attr('data-column'));
               column.visible(!column.visible());
           });

           //删除选中行
           $('#example tbody').on('click', 'tr input[name="checkList"]', function () {
               var $tr = $(this).parents('tr');
               $tr.toggleClass('selected');
               var $tmp = $('[name=checkList]:checkbox');
               $('#checkAll').prop('checked', $tmp.length == $tmp.filter(':checked').length);

           });

           $('#button').click(function () {
               table.row('.selected').remove().draw(false);
           });

           $('.showcol').click(function () {
               $('.showul').toggle();

           })

           //获取表格宽度赋值给右侧弹出层
           wt = $('.wt100').width();
           $('.showslider').css('right', -wt);

           //关闭右侧弹出层
           $('.closediv').click(function () {
               $(this).parent('.showslider').animate({
                   right: -wt
               }, 200)
               $('.clickdom').attr('isclick', true)
           });


       })

       //右侧弹出详情层
       /*  var flag=false;
        function clickDom(obj){
        var  $par=$(obj).parents('#example_wrapper').siblings('.showslider')
        var  isattr=$(obj).attr('isclick');
        if(isattr=="true"){
        if(flag){
        $par.animate({
        right:-wt
        },200)
        flag=!flag
        }
        else{
        $par.animate({
        right:0
        },200)
        flag=!flag

        }
        }
        $('.clickdom').attr('isclick',false)
        $(obj).attr('isclick',true)


        }
        */
       function clickDom(obj) {
           var $par = $(obj).parents('#example_wrapper').siblings('.showslider')
           var isattr = $(obj).attr('isclick');
           if (isattr == "false") {

           } else {
               $par.animate({
                   right: -wt
               }, 200)
               $par.animate({
                   right: 0
               }, 400)
               $('.clickdom').attr('isclick', true)
               $(obj).attr('isclick', false)
           }

       }

 </script>
诸葛苍穹
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
springboot thymeleaf和jquery dataTable 插件的简单demo
u013558123的博客
03-22 1266
直接上代码吧，记录备忘： <!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>Getting Started: Handling Form Submission</title> <meta http-equiv="Con...
datatables入门demo
chishing943的博客
04-02 1357
1、环境准备 首先准备需要的js和css，在官网的页面可以定制，https://datatables.net/download/ 1.1 Choose a styling framework 选择需要样式骨架 1.2Select packages 选择jQuery3或1和Data Tables，如果需要支持IE9之前的版本需要选择jQuery1 1.3Extensions 提...
jquery DataTable 的demo
id_no_chinese的博客
06-12 2320
1.文件引入：css文件和js文件 link rel="stylesheet" type="text/css" href="/libs/dataTable/css/dataTables.bootstrap.css" /> script type="text/javascript" src="/libs/dataTable/js/jquery.dataTables.min.js">sc
深入了解DataTable
weixin_45970345的博客
12-27 4353
欢迎您观看本期为您带来的Everdroid相关介绍视频，本期带来的是深入了解DataTable。在，在本期学习中分为三个部分，第一部分介绍DataTable，第二部分了解DataTable的常用操作，第三部分我们来介绍一下如何在Everdroid设计器中使用。 1.DataTable介绍 先介绍一下DataTable翻译过来是什么意思，DataTable翻译成中文就是数据表的意思，在我们今天的介绍...
jquery+dataTable实现增删改查demo
weixin_44478408的博客
06-21 1299
data.json { "body":[ { "id":1, "name":"三体", "author":"刘慈欣", "price":"23.00", "publish":"重庆出版社", "isbn":"9787536692930" }, { "id":2, "name"...
ngx-datatable中文教程
前端啤酒屋
05-12 2272
ngx-datatable在网络上教程相对较少，并且在官网文档中查看demo需要找到对应的位置，也不方便开发。 所以我将GitHub上的ngx-datatable下载下来运行，与编译器对应。 下载地址： https://github.com/swimlane/ngx-datatable 文档地址： https://swimlane.gitbook.io/ngx-datatable 安装依赖,启动： npm i npm start 搜索demo <div> <h3>
jQuery Datatable 实用简单实例
热门推荐
GarfieldEr007的专栏
08-29 1万+
目标： 使用jQuery Datatable构造数据列表，并且增加或者隐藏相应的列，已达到数据显示要求。同时，jQuery Datatable强大的功能支持：排序，分页，搜索等。 Query Datatable能良好支持数据完全加载到本地后构建数据列表，排序、分页、搜索等功能就会自带，不需要我们去关心，在此主要说明通过后台动态的加载数据，已达到在大数据面前提高效率的
datatable的使用
lgxzzz的博客
08-26 1204
1:导入包： URL：http://www.datatables.net/ 分别导入css和js文件 Html代码 <styletype="text/css"title="currentStyle"> @import"css/demo_page.css"; @import"css/demo_table.css"; @import"css/demo_table_jui.css"; </style> ...
WPF DataGrid绑定DataTable demo
07-21
在本文中，我们将深入探讨如何在Windows Presentation Foundation (WPF) 中使用DataGrid控件绑定到DataTable对象。WPF DataGrid是一种强大的数据展示组件，它允许我们以表格形式展示和编辑数据。DataTable作为.NET ...
Demo.zip_DEMO_datatable实例
09-24
【标题】"Demo.zip_DEMO_datatable实例"是一个关于如何集成和使用DataTable的演示项目。DataTable是一个强大的JavaScript库，常用于在网页上展示和操作数据表。这个DEMO旨在展示如何将DataTable与页面元素的右键菜单...
dataTable 小demo
10-15
在这个"dataTable小demo"项目中，开发者在原有的代码基础上进行了调整，并引入了MySQL数据库作为数据源，这为我们提供了一个将动态数据展示在Web页面上的实例。 首先，`dataTable`库本身是基于jQuery构建的，它通过...
datatable用法 demo
08-24
这个"datatable用法 demo"是针对`Datatable`库的一个实例教程，旨在帮助开发者了解如何在实际项目中添加列和行。下面将详细阐述`Datatable`的核心概念、添加列和行的操作方法，以及如何通过实践应用这些知识。 首先...
DataTable的常见使用Demo
04-10
在.NET框架中，`DataTable`是`System.Data`命名空间中的一个核心组件，常用于存储和操作数据。它提供了一个类似数据库表格的数据结构，可以动态地创建、填充和操作数据。下面将详细介绍`DataTable`的常见使用、...
JQuery手机端预约时间段选择
诸葛苍穹
01-27 3758
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>时间表选择</title> <style> body,ul,li{margin:0;padding:0;} li{list-style:none;} .box{width:500px;margin:0 auto;border:3px s
keymaster.js的使用（前端键盘快捷键）
诸葛苍穹
10-16 2700
1>像往常一样，引入keymaster.js文件到你的项目中。 2>定义快捷键key('a', function(){ alert('you pressed a!') }); // returning false stops the event and prevents default browser events key('ctrl+r', function(){ alert('stopped
天气预报插件
诸葛苍穹
05-14 666
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <iframe width="420" scrolling="no" height="60" frameborder="0" allowtransparency="
HTML5实现全屏API【进入和退出全屏】
诸葛苍穹
07-06 631
// Webkit (works in Safari5.1 and Chrome 15) element.webkitRequestFullScreen(); document.webkitCancelFullScreen();// Firefox 10+ element.mozRequestFullScreen(); document.mozCancelFullScreen();// W3
前端开发工具
诸葛苍穹
03-16 564
随着CSS3的出现，CSS3讨论的话题越来越多了，现在各种教程也是多如牛毛，不比一年前的时候，找个资料要捞遍整个互联网，而且还很难找到自己需要的参考资料。从侧面也说明，CSS3对于前端工程师来说，越来越重要了，从各处的招聘信息也能看出这一点。说这么说我想强调的是他的重要性。另一方面，有很多CSS3的效果真的不需我们自己一个一个去写，在这种情况就互联网上有关于CSS3的工具就出现了，这些工具将给你的制
winfrom程序操作sqlite数据库demo源码
最新发布
07-10
### 回答1： 以下是一个使用 WinForms 程序操作 SQLite 数据库的示例源码： ```csharp using System; using System.Data.SQLite; using System.Windows.Forms; namespace SQLiteDemo { public partial class MainForm : Form { private SQLiteConnection connection; private SQLiteCommand command; public MainForm() { InitializeComponent(); } private void MainForm_Load(object sender, EventArgs e) { // 连接到 SQLite 数据库 connection = new SQLiteConnection("Data Source=database.db;Version=3;"); connection.Open(); command = new SQLiteCommand(connection); // 创建表格 command.CommandText = "CREATE TABLE IF NOT EXISTS Person (Id INTEGER PRIMARY KEY AUTOINCREMENT, Name TEXT, Age INTEGER)"; command.ExecuteNonQuery(); } private void btnAdd_Click(object sender, EventArgs e) { // 插入数据 string name = tbName.Text; int age = Convert.ToInt32(tbAge.Text); command.CommandText = "INSERT INTO Person (Name, Age) VALUES (@name, @age)"; command.Parameters.AddWithValue("@name", name); command.Parameters.AddWithValue("@age", age); command.ExecuteNonQuery(); MessageBox.Show("数据已添加成功！"); } private void btnDisplay_Click(object sender, EventArgs e) { // 显示数据 command.CommandText = "SELECT * FROM Person"; using (SQLiteDataReader reader = command.ExecuteReader()) { while (reader.Read()) { int id = Convert.ToInt32(reader["Id"]); string name = reader["Name"].ToString(); int age = Convert.ToInt32(reader["Age"]); MessageBox.Show($"ID: {id}\nName: {name}\nAge: {age}"); } } } private void MainForm_FormClosing(object sender, FormClosingEventArgs e) { // 关闭数据库连接 command.Dispose(); connection.Close(); } } } ``` 这个示例中，我们创建了一个名为 `MainForm` 的窗体，包含了用于输入名称和年龄的文本框，以及用于添加和显示数据的按钮。在窗体加载时，我们首先连接到 SQLite 数据库并创建了一个名为 `Person` 的表格。通过点击“添加”按钮，我们可以将输入的名称和年龄插入到数据库中。点击“显示”按钮，我们会从数据库中查询所有的数据，并在弹出消息框中显示出来。 ### 回答2： 下面是一个使用Winform程序操作SQLite数据库的示例代码： ```csharp using System; using System.Data.SQLite; using System.Windows.Forms; namespace WinformSQLiteDemo { public partial class MainForm : Form { private SQLiteConnection _conn; public MainForm() { InitializeComponent(); } private void MainForm_Load(object sender, EventArgs e) { // 创建数据库连接 _conn = new SQLiteConnection("Data Source=MyDatabase.db;Version=3;"); _conn.Open(); // 创建表 string createTableQuery = "CREATE TABLE IF NOT EXISTS Users (Id INTEGER PRIMARY KEY AUTOINCREMENT, Name TEXT, Age INTEGER)"; SQLiteCommand createTableCmd = new SQLiteCommand(createTableQuery, _conn); createTableCmd.ExecuteNonQuery(); // 查询并显示数据 string selectQuery = "SELECT * FROM Users"; SQLiteCommand selectCmd = new SQLiteCommand(selectQuery, _conn); SQLiteDataReader reader = selectCmd.ExecuteReader(); while (reader.Read()) { string name = reader.GetString(1); int age = reader.GetInt32(2); dataGridView.Rows.Add(name, age); } // 关闭连接 reader.Close(); _conn.Close(); } private void addButton_Click(object sender, EventArgs e) { string name = nameTextBox.Text; int age = Convert.ToInt32(ageTextBox.Text); // 插入数据 _conn.Open(); string insertQuery = "INSERT INTO Users (Name, Age) VALUES (@name, @age)"; SQLiteCommand insertCmd = new SQLiteCommand(insertQuery, _conn); insertCmd.Parameters.AddWithValue("@name", name); insertCmd.Parameters.AddWithValue("@age", age); insertCmd.ExecuteNonQuery(); // 更新DataGridView dataGridView.Rows.Add(name, age); // 清除输入框 nameTextBox.Text = ""; ageTextBox.Text = ""; _conn.Close(); } } } ``` 这个示例代码包含一个主窗体（MainForm），它在加载时创建了一个SQLite数据库连接，并创建了一个名为"Users"的表。在加载时，它还从数据库中读取已有的用户数据，并将其显示在一个DataGridView控件中。 在窗体中还有一个添加按钮（addButton），当用户输入姓名和年龄后点击此按钮，程序将把数据插入到数据库中，并更新DataGridView以显示新添加的数据。 请注意，该示例中的数据库文件名为"MyDatabase.db"，你可以根据需要修改它。 ### 回答3： 以下是一个用于操作SQLite数据库的WinForm程序的示例源代码： ```csharp using System; using System.Data; using System.Data.SQLite; using System.Windows.Forms; namespace SQLiteDemo { public partial class MainForm : Form { private SQLiteConnection connection; private SQLiteCommand command; public MainForm() { InitializeComponent(); } private void MainForm_Load(object sender, EventArgs e) { string connectionString = "Data Source=database.db;Version=3;"; connection = new SQLiteConnection(connectionString); command = new SQLiteCommand(connection); connection.Open(); CreateSampleTable(); } private void MainForm_FormClosing(object sender, FormClosingEventArgs e) { connection.Close(); connection.Dispose(); } private void CreateSampleTable() { string createTableQuery = "CREATE TABLE IF NOT EXISTS Users (Id INTEGER PRIMARY KEY AUTOINCREMENT, Name TEXT, Age INTEGER)"; command.CommandText = createTableQuery; command.ExecuteNonQuery(); } private void btnInsert_Click(object sender, EventArgs e) { string name = txtName.Text; int age = Convert.ToInt32(txtAge.Text); string insertQuery = $"INSERT INTO Users (Name, Age) VALUES ('{name}', {age})"; command.CommandText = insertQuery; command.ExecuteNonQuery(); MessageBox.Show("数据插入成功！"); LoadData(); } private void btnDelete_Click(object sender, EventArgs e) { int id = Convert.ToInt32(txtId.Text); string deleteQuery = $"DELETE FROM Users WHERE Id = {id}"; command.CommandText = deleteQuery; command.ExecuteNonQuery(); MessageBox.Show("数据删除成功！"); LoadData(); } private void btnUpdate_Click(object sender, EventArgs e) { int id = Convert.ToInt32(txtId.Text); string name = txtName.Text; int age = Convert.ToInt32(txtAge.Text); string updateQuery = $"UPDATE Users SET Name = '{name}', Age = {age} WHERE Id = {id}"; command.CommandText = updateQuery; command.ExecuteNonQuery(); MessageBox.Show("数据更新成功！"); LoadData(); } private void LoadData() { string selectQuery = "SELECT * FROM Users"; SQLiteDataAdapter adapter = new SQLiteDataAdapter(selectQuery, connection); DataTable dataTable = new DataTable(); adapter.Fill(dataTable); dataGridView.DataSource = dataTable; } } } ``` 这个示例程序创建了一个包含三个字段（Id、Name和Age）的Users表。通过使用不同的按钮，可以插入、删除和更新数据库中的数据。每次操作完成后，数据表将被重新加载到DataGridView控件中以显示更新后的内容。请确保已在程序所在的目录下创建了一个名为database.db的SQLite数据库文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值