bootstrap做的前台用什么来连接sql数据库实现增删改查

bootstrap做的前台用什么来连接sql数据库实现增删改查,第1张

建议使用MVC模式做,JSP页面提交相应的 *** 作后,提交给Servlet,Servlet中调用Model中定义的增删改查方法,方法调用后返回结果,然后通过Servlet返回给JSP页面。对于前台的增删改查跟数据库中中新建查询的 *** 作是一样的,只是JSP页面增删改查是调用数据库查询语句封装的函数方法而已!

opyright © 1999-2020, CSDN.NET, All Rights Reserved

打开APP

【Bootstrap】—table控件的传参取值 原创

2017-05-05 00:02:08

奔跑的大白啊

码龄8年

关注

前言

      最近小编接触的项目中,统一采用扁平化的流行风格,前台使用的Bootstrap框架,相对于EasyUI绑定数据的时候有点复杂,在Table控件传值的时候就卡住了,Bootstrap第一次了解,总结一下它的使用套路。

需求描述

      查询一段时间间隔内的数据,需要获取页面上两个日期控件上的日期值传递到Controller的方法中做进一步的逻辑处理。

代码详解

1. 在cshtml页面引用相关组件,并定义一个空的表格       

@*bootstrap table组件以及中文包的引用*@

 <script src="~/Content/bootstrap-table/bootstrap-table.js"></script>

 <link href="~/Content/bootstrap-table/bootstrap-table.css" rel="stylesheet" />

 <script src="~/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>

@*定义一个空的table*@

<table id="table"></table> 

2. Js初始化  

$(function () {

 

 //初始化Table

 var oTable = new TableInit()

 oTable.Init()

})

 

var TableInit = function () {

 var oTableInit = new Object()

 //初始化Table

 oTableInit.Init = function () {

 $('#table').bootstrapTable({

 url: '/ConfluenceSurvey/Query', //请求后台的URL(*)

 method: 'get', //请求方式(*)

 toolbar: '#toolbar', //工具按钮用哪个容器

 striped: true, //是否显示行间隔色

 cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)

 pagination: true, //是否显示分页(*)

 sortable: false, //是否启用排序

 sortOrder: "asc", //排序方式

 queryParams: oTableInit.queryParams,//传递参数(*)

 sidePagination: "client", //分页方式:client客户端分页,server服务端分页(*)

 pageNumber:1, //初始化加载第一页,默认第一页

 pageSize: 10, //每页的记录行数(*)

 pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)

 search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大

 strictSearch: true,

 showColumns: true, //是否显示所有的列

 showRefresh: true, //是否显示刷新按钮

 minimumCountColumns: 2, //最少允许的列数

 clickToSelect: true, //是否启用点击选中行

 height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度

 uniqueId: "ID", //每一行的唯一标识,一般为主键列

 showToggle:true, //是否显示详细视图和列表视图的切换按钮

 cardView: false, //是否显示详细视图

 detailView: false, //是否显示父子表

 columns: [{

 checkbox: true

 }, {

 field: 'date',

 title: '日期'

 }, {

 field: 'daycoin',

 title: '每日小计'

 }, {

 field: 'totalcoin',

 title: '到此日的积分'

  } ]

 })

 }

 

 //得到查询的参数

 oTableInit.queryParams = function (params) {

 var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的

 limit: params.limit, //页面大小

 offset: params.offset, //页码

startdate: $("#startdate").val(),

 enddate: $("#enddate").val()

 }

 return temp

 }

 return oTableInit

}

注:初始化Table必须的几个参数小编用(*)做了标记。

3. 在Controller中对应的方法

     按照正常的方法传参接收就可以了,此处代码省略

4. 效果

    

重点突破-传参取值

1.Table组件中定义传参属性

queryParams: oTableInit.queryParams,//传递参数(*)

2. 定义具体传参方法

//得到查询的参数

oTableInit.queryParams = function (params) {

var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的

limit: params.limit, //页面大小

offset: params.offset, //页码

startdate: $("#startdate").val(),

enddate: $("#enddate").val()

}

return temp

}

return oTableInit

}

总结

     不怕不知道,就怕不知道,有需求就一定可以实现。

    

打开CSDN,阅读体验更佳

最新发布 bootstrapTable传参示例

bootstrapTable传参示例

继续访问

bootstrap table配置参数例子

主要为大家详细介绍了bootstrapTable的参数设置,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

Bootstrap initTable参数传递

queryParams: function (params) { var searchParams = $('#searchForm').getValues()var temp = { paraId: arr['id'], paraLB: arr['leibie'] , ...

继续访问

Bootstrap-table 查询时通过Post请求传入复杂类型参数到后台控制器

Bootstrap-table默认的传参 Bootstrap-table每次刷新或者排序都会自动向设置好的url发送一个请求,请求中包含4个默认的参数 当data-query-params-type属性设置成limit时(默认情况) 四个参数为:limit,offset,sort,order 当data-query-params-type为空时 四个参数为:pageSize,pa...

继续访问

bootstrap-table 获取所有数据_Bootstrap table教程

Bootstrap-table是一个基于Bootstrap的jQuery插件,可以实现将数据库中提取到数据在前端进行相应 *** 作的功能快速上手 对本文有什么疑问或者建议,可以在下方的评论区说明,笔者会尽能力给出解答,另外已经完成了bootstrap-table的增删改查 *** 作,以及增加 *** 作的的模态框(bootstrap modal),以及表单校检(bootstrap-validate),最近有点忙,过一...

继续访问

Bootstrap-Table实现自定义条件查询

鉴于最近有人询问Bootstrap-Table的自定义条件查询如何实现,今天特在此说明。首先展示一下效果: 默认查询 条件查询 测试数据 前端代码 <!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><...

继续访问

BootStrap table 传递搜索参数

转载自:http://www.cnblogs.com/huhangfei/p/5019733.html 看bootStrap table文档不难发现它有一个queryparams属性,是向后台传递参数的,默认参数已有pageSize、pageIndex等,那么怎么传递自定义的参数呢?在网上找了好多也没有找到于是看源码,得到解决方法: function Search(

继续访问

bootstrap table offset 参数问题

初始化table的时候:queryParamsType 没这个参数 oTableInit.queryParams = function (params) { console.log(params) var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 limit: params.limit...

继续访问

封装ul组件,使用这个element组件库Table相关 *** 作,Drawer 抽屉基本用法,element table表格选中事件。传参问题。elementui中的input修改宽度

封装ul组件,使用这个element组件库Table相关 *** 作,element table表格选中事件。传参问题

继续访问

原生table点击传参问题

大多数情况,我们在做表格的时候,会有一个点击事件,同时会传参数,但是,今天我要描述的是:点击表格传递两个参数(即传“所在行”和“所在列”这两个参数),表格如下图所示 然后给每个单元格一个点击事件 <td class="td" @click="toDeatil()">{{item.num1}}</td>只有在这个toDetail()方法中进行传参问题 toDetail() { let table = event.srcElementlet r.

继续访问

《前端》BootstrapTable表格的使用-2020年9月24日--(??传递参数queryParams)

想做一个可以自定义配置列的table。发现bootstrap-table有这个功能。但是我单独一个文件试验的时候能出效果。但是当组合的其他页面的时候,却不生效报错了。 原因:添加引用文件的顺序导致的。 放到上面就显示了。 效果如图: 代码: <!-- 引用 --><link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.c

继续访问

bootstarp 之 简单表格$(function () { console.log()//1.初始化Table var oTable = new TableInit(

点击行事件触发需要jquery-toast.js 当然也需要bootstarp table 的js css $(function () {      console.log()    //1.初始化Table     var oTable = new TableInit()    oTable.Init()    //2.初始化Button的点击事件  

继续访问

bootstrap table初始化参数

//初始化Table $('#tb_order').bootstrapTable({ url: '/TableStyle/GetOrder', //请求后台的URL(*) method: 'get', //请求方式(*) //toolbar: '#too

继续访问

bootstrapTable中queryParams传值到后台获取不到解决办法

1、使用boostrap的table插件做表单时,在传值到后台时,后台获取不到,一直是null,很是头疼 解决办法:在对应Action中,定义提交过来的参数,然后提供set,get方法: 其set和get方法: 之后在Action方法中:

继续访问

JQuery Datatables Columns API 参数详细说明

Data Tables: http://datatables.net/ Version: 1.10.0   Columns说明 虽然我们可以通过DOM直接获取DataTables元素的信息,但是DataTables提供了更方便的方法,可以自定义列的属性。下边就让我们一起来学习DataTables是怎么来定义列属性的。 DataTables提供了两个参数来定义列属性:columns ...

继续访问

Bootstrap Table使用分享

版权声明:本文为博主原创文章,未经博主允许不得转载。 最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计一套适合手机的页面,当手机访问时,进入m.zhy.com(手机页面),pc设备访问时,进入www.zhy.com(pc页面) b方案:采用bootstrap框架,替换原有页面,自动适应手机、平板、PC 设备 采...

继续访问

热门推荐 bootstrap-table的formatter列参数

<% String path = request.getContextPath()String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"response.setHeader("X-Frame-Op

继续访问

数据库课程设计

c语言文件读写 *** 作代码

1、批处理脚本中,要想与用户实行交互,需要用到命令set 配合/p参数一起使用。

2、set命令是用来定义变量并赋值的,而使用/p参数后,set 并不马上在命令中给变量赋值,而是另起一行,等待用户的输入,并用户的输入内容做为值赋给变量。

3、而且在set /p后,可以加入提示语句,让用户知道,程序正在等待输入。

4、与用户交互,虽然已经实现了用户输入的接收。但还需要对接收到的内容进行处理,这时可以利用if 语句来完成。

5、运行后的效果如下,用户输入admin时,显示“输入正确”,否则,显示“请输入正确的用户名”。

6、再来完善一下脚本代码,做一个简单的用户登录判断。主要用到goto语句和if语句,实现python写网页后台实现与数据库交互。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/sjk/9913738.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-03
下一篇 2023-05-03

发表评论

登录后才能评论

评论列表(0条)

保存