BootStrap轻松实现微信页面开发代码分享

网友投稿 573 2023-07-02


BootStrap轻松实现微信页面开发代码分享

1.  行长度：

2.modal

data-bv-notempty="true" data-bv-notempty-message="不能为空"/>

data-bv-notempty="true" data-bv-notempty-message="不能为空"/>

3.  事例

<%@ taglib prefix="spring" uri="http://springframework.org/tags/form" %>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

${materialDto.projectName }

${materialDto.name }

${materialDto.inDate }

${materialDto.inQuantity }

${materialDto.inLeader }

data-search="false"

data-show-refresh="false"

data-toggle="card"

data-card-view = "true"

data-show-toggle="false"

data-show-columns="false"

data-page-list="[10,20,50,100]">

出库时间：

出库数量：

出库人：

出库时间：

出库数量：

出库人：

data-bv-notempty="true" data-bv-notempty-message="不能为空"/>

data-bv-notempty="true" data-bv-notempty-message="不能为空"/>

正在保存，请稍后...

保存成功。

4. js文件

var MaterialManager = {};

$(document).ready(function() {

MaterialManager.query = function(){

$('#outMaterialTable').bootstrapTable('destroy');

//初始化表格,动态从服务器加载数据

$("#outMaterialTable").bootstrapTable({

url:'../../supManage/material/queryOutMaterialList.do',

method: "get", //使用get请求到服务器获取数据

contentType: "application/x-www-form-urlencoded",

striped: true, //表格显示条纹

pageSize: 10, //每页显示的记录数

pageNumber:1, //当前第几页

pageList: [5, 10, 15, 20, 25], //记录数可选列表

sidePagination: "server", //表示服务端请求

//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder

//设置为limit可以获取limit, offset, search, sort, order

queryParamsType : "undefined",

queryParams: function queryParams(params) { //设置查询参数

var param = {

currentPage: params.pageNumber,

recordsPerPage: params.pageSize,

mId:$("#id").val()

};

return param;

}

});

};

MaterialManager.query();

$("#saveOutMaterialBtn").click(function(){

$("#loadingModal").modal('show');

$("#myModal").modal('hide');

$.ajax({

type: "POST",

url: "../../supManage/material/saveOutMaterial.do",

data:$("#outMaterialForm").serialize(),

dataType: "json",

success: function(data){

$("#loadingModal").modal('hide');

$("#alertModal").modal('show');

MaterialManager.query();

setInterval(function(){$("#alertModal").modal('hide');},2000);

}

});

});

// 出库按钮

$("#outQuantityBtn").click(function(){

$("#myModal").modal('show');

});

$('#outDate').datetimepicker({

format: 'yyyy-mm-dd hh:ii:ss',

language:'zh-CN',

autoclose:true,

startDate:'2016-09-01',

endDate:'2025-12-12'

});

$(".quantity-add").click(function(e){

//Vars

var count = 1;

var newcount = 0;

//Wert holen + Rechnen

var elemID = $(this).parent().attr("id");

var countField = $("#"+elemID+'inp');

var count = $("#"+elemID+'inp').val();

var newcount = parseInt(count) + 1;

//Neuen Wert setzen

$("#"+elemID+'inp').val(newcount);

});

//Remove

$(".quantity-remove").click(function(e){

//Vars

var count = 1;

var newcount = 0;

//Wert holen + Rechnen

var elemID = $(this).parent().attr("id");

var countField = $("#"+elemID+'inp');

var count = $("#"+elemID+'inp').val();

var newcount = parseInt(count) - 1;

//Neuen Wert setzen

$("#"+elemID+'inp').val(newcount);

});

});

5 , 添加页面

<%@ taglib prefix="spring" uri="http://springframework.org/tags/form" %>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%@page import="com.base.project.wechat.m500point.dto.PointQualitySecurityDto" %>

<%@page import="com.base.pf.base.util.StringUtils" %>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<%PointQualitySecurityDto pDto = ((PointQualitySecurityDto)request.getAttribute("pointQualitySecurityDto")); %>

工程部位（工点）

检查人

检查时间

data-search="false"

data-show-refresh="false"

data-toggle="card"

data-card-view = "true"

data-show-toggle="false"

data-show-columns="false"

data-page-list="[10,20,50,100]">

检查项目

实际得分

是否合格

附件

检查项目

实际得分

是否合格

附件

checked<%} %>>是

checked<%} %>>否

<%-- ${pointQualitySecurityDto.sSecurityFileName } --%>

<%if(!StringUtils.isEmpty(pDto.getsSecurityFileName())){ %>

<%} %>

checked<%} %>>是

checked<%} %>>否

<%-- ${pointQualitySecurityDto.sCiviliztionFileName } --%>

<%if(!StringUtils.isEmpty(pDto.getsCiviliztionFileName())){ %>

<%} %>

checked<%} %>>是

checked<%} %>>否

<%-- ${pointQualitySecurityDto.sScaffoldFileName } --%>

<%if(!StringUtils.isEmpty(pDto.getsScaffoldFileName())){ %>

<%} %>

checked<%} %>>是

checked<%} %>>否

<%-- ${pointQualitySecurityDto.sFounationFileName } --%>

<%if(!StringUtils.isEmpty(pDto.getsFounationFileName())){ %>

<%} %>

checked<%} %>>是

checked<%} %>>否

<%-- ${pointQualitySecurityDto.sLiftFileName } --%>

<%if(!StringUtils.isEmpty(pDto.getsLiftFileName())){ %>

<%} %>

checked<%} %>>是

checked<%} %>>否

<%-- ${pointQualitySecurityDto.sElectricityFileName } --%>

<%if(!StringUtils.isEmpty(pDto.getsElectricityFileName())){ %>

<%} %>

checked<%} %>>是

checked<%} %>>否

<%-- ${pointQualitySecurityDto.sMachineryFileName } --%>

<%if(!StringUtils.isEmpty(pDto.getsMachineryFileName())){ %>

<%} %>

data-search="false"

data-show-refresh="false"

data-toggle="card"

data-card-view = "true"

data-show-toggle="false"

data-show-columns="false"

data-page-list="[10,20,50,100]">

检查项目

实际得分

是否合格

拍照

检查项目

实际得分

是否合格

拍照

checked<%} %>>是

checked<%} %>>否

<%-- ${pointQualitySecurityDto.qLimeFileName } --%>

<%if(!StringUtils.isEmpty(pDto.getqLimeFileName())){ %>

<%} %>

checked<%} %>>是

checked<%} %>>否

<%-- ${pointQualitySecurityDto.qCementFileName } --%>

<%if(!StringUtils.isEmpty(pDto.getqCementFileName())){ %>

<%} %>

checked<%} %>>是

checked<%} %>>否

<%-- ${pointQualitySecurityDto.qPileCountFileName } --%>

<%if(!StringUtils.isEmpty(pDto.getqPileCountFileName())){ %>

<%} %>

checked<%} %>>是

checked<%} %>>否

<%-- ${pointQualitySecurityDto.qFillingFileName } --%>

<%if(!StringUtils.isEmpty(pDto.getqFillingFileName())){ %>

<%} %>

checked<%} %>>是

checked<%} %>>否

<%-- ${pointQualitySecurityDto.qTechnologyFileName } --%>

<%if(!StringUtils.isEmpty(pDto.getqTechnologyFileName())){ %>

<%} %>

checked<%} %>>是

checked<%} %>>否

<%-- ${pointQualitySecurityDto.qPileDensityFileName } --%>

<%if(!StringUtils.isEmpty(pDto.getqPileDensityFileName())){ %>

<%} %>

checked<%} %>>是

checked<%} %>>否

<%-- ${pointQualitySecurityDto.qBearingFileName } --%>

<%if(!StringUtils.isEmpty(pDto.getqBearingFileName())){ %>

<%} %>

图片正在上传，请稍后...

6. 查看页面

<%@ taglib prefix="spring" uri="http://springframework.org/tags/form" %>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%@page import="com.base.project.wechat.m500point.dto.PointQualitySecurityDto" %>

<%@page import="com.base.pf.base.util.StringUtils" %>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<%PointQualitySecurityDto pDto = ((PointQualitySecurityDto)request.getAttribute("pointQualitySecurityDto")); %>

工程部位（工点）

检查人

检查时间

data-search="false"

data-show-refresh="false"

data-toggle="card"

data-card-view = "true"

data-show-toggle="false"

data-show-columns="false"

data-page-list="[10,20,50,100]">

检查项目

实际得分

是否合格

附件

检查项目

实际得分

是否合格

附件

<%if(!StringUtils.isEmpty(pDto.getsSecurityFileName())){ %>

<%} %>

<%if(!StringUtils.isEmpty(pDto.getsCiviliztionFileName())){ %>

<%} %>

<%if(!StringUtils.isEmpty(pDto.getsScaffoldFileName())){ %>

<%} %>

<%if(!StringUtils.isEmpty(pDto.getsFounationFileName())){ %>

<%} %>

<%if(!StringUtils.isEmpty(pDto.getsLiftFileName())){ %>

<%} %>

<%if(!StringUtils.isEmpty(pDto.getsElectricityFileName())){ %>

<%} %>

<%if(!StringUtils.isEmpty(pDto.getsMachineryFileName())){ %>

<%} %>

data-search="false"

data-show-refresh="false"

data-toggle="card"

data-card-view = "true"

data-show-toggle="false"

data-show-columns="false"

data-page-list="[10,20,50,100]">

检查项目

实际得分

是否合格

附件

检查项目

实际得分

是否合格

附件

<%if(!StringUtils.isEmpty(pDto.getqLimeFileName())){ %>

<%} %>

<%if(!StringUtils.isEmpty(pDto.getqCementFileName())){ %>

<%} %>

<%if(!StringUtils.isEmpty(pDto.getqPileCountFileName())){ %>

<%} %>

<%if(!StringUtils.isEmpty(pDto.getqFillingFileName())){ %>

<%} %>

<%if(!StringUtils.isEmpty(pDto.getqTechnologyFileName())){ %>

<%} %>

<%if(!StringUtils.isEmpty(pDto.getqPileDensityFileName())){ %>

<%} %>

<%if(!StringUtils.isEmpty(pDto.getqBearingFileName())){ %>

<%} %>

7. 列表页面

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

data-search="false"

data-show-refresh="false"

data-toggle="card"

data-card-view = "true"

data-show-toggle="false"

data-show-columns="true">

工程部位（工点）：

记录人：

记录时间：

检查类型：

详细：

function initTable() {

// 先销毁表格

// $('#cusTable').bootstrapTable('destroy');

// 初始化表格,动态从服务器加载数据

$("#pointQualitySecurityTable").bootstrapTable({

method : "get", // 使用get请求到服务器获取数据

url : "queryQualitySecurityList.do", // 获取数据的Servlet地址

contentType: "application/x-www-form-urlencoded",

striped : true, // 表格显示条纹

pagination : false, // 启动分页

pageNumber : 1, // 当前第几页

sidePagination : "server", // 表示服务端请求

// 设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder

// 设置为limit可以获取limit, offset, search, sort, order

queryParamsType : "undefined",

queryParams : function queryParams(params) { // 设置查询参数

var param = {

pageNumber : params.pageNumber,

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

};

return param;

}

});

}

function showDetail(value,row,index){

return "查看";

}

$(document).ready(function() {

// 调用函数，初始化表格

initTable();

// 当点击查询按钮的时候执行

// $("#search").bind("click", initTable);

});

以上所述是给大家介绍的BootStrap轻松实现微信页面开发代码分享，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！


版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：代码 http 函数 加载 文件
上一篇:浅谈mybatis中的#和$的区别 以及防止sql注入的方法
下一篇:connection reset by peer问题总结及解决方案
相关文章

 发表评论

暂时没有评论，来抢沙发吧~