0

0

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

PHPz

PHPz

发布时间:2016-12-09 14:04:06

|

2051人浏览过

|

来源于php中文网

原创

1.  行长度:

2.modal

   

斯摩派(smapie)企业建站程序
斯摩派(smapie)企业建站程序

一个让ASP程序轻松做最少的代码编写量,一般企业所需要的功能都有,参数设置,数据库管理,文件管理,数据初始化,生成HTML页面(这是为了某些客户需要静态页面的需求),页面管理(这里是为了网站中某些单页面需求而开发的,这里你在前台只要用sub_c.article(2) 这个2是这里的id号,也可以是在比如index.asp?id=2 是一样的效果)公告管理,友情链接,信息发布(这里有分类,分类是无限

下载

3.  事例  

<%@ taglib prefix="spring" uri="http://www.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 }
出库列表
出库时间: 出库数量: 出库人:

   

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://www.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")); %>



 
 
 
 
 
 
 
 
 
 
工程部位(工点) 检查人 检查时间
${pointQualitySecurityDto.pointProject } ${pointQualitySecurityDto.recordPerson } ${pointQualitySecurityDto.recordDate }
安全
检查项目 实际得分 是否合格 附件
安全施工 checked<%} %>>是 checked<%} %>>否 <%-- ${pointQualitySecurityDto.sSecurityFileName } --%> @@##@@/page/project/wechat/m500point/img/camera_picture.png"> <%if(!StringUtils.isEmpty(pDto.getsSecurityFileName())){ %> @@##@@/page/project/wechat/m500point/img/box_picture.png"> <%} %>
文明施工 checked<%} %>>是 checked<%} %>>否 <%-- ${pointQualitySecurityDto.sCiviliztionFileName } --%> @@##@@/page/project/wechat/m500point/img/camera_picture.png"> <%if(!StringUtils.isEmpty(pDto.getsCiviliztionFileName())){ %> @@##@@/page/project/wechat/m500point/img/box_picture.png"> <%} %>
脚手架 checked<%} %>>是 checked<%} %>>否 <%-- ${pointQualitySecurityDto.sScaffoldFileName } --%> @@##@@/page/project/wechat/m500point/img/camera_picture.png"> <%if(!StringUtils.isEmpty(pDto.getsScaffoldFileName())){ %> @@##@@/page/project/wechat/m500point/img/box_picture.png"> <%} %>
基坑支撑 checked<%} %>>是 checked<%} %>>否 <%-- ${pointQualitySecurityDto.sFounationFileName } --%> @@##@@/page/project/wechat/m500point/img/camera_picture.png"> <%if(!StringUtils.isEmpty(pDto.getsFounationFileName())){ %> @@##@@/page/project/wechat/m500point/img/box_picture.png"> <%} %>
外用电梯 checked<%} %>>是 checked<%} %>>否 <%-- ${pointQualitySecurityDto.sLiftFileName } --%> @@##@@/page/project/wechat/m500point/img/camera_picture.png"> <%if(!StringUtils.isEmpty(pDto.getsLiftFileName())){ %> @@##@@/page/project/wechat/m500point/img/box_picture.png"> <%} %>
施工用电 checked<%} %>>是 checked<%} %>>否 <%-- ${pointQualitySecurityDto.sElectricityFileName } --%> @@##@@/page/project/wechat/m500point/img/camera_picture.png"> <%if(!StringUtils.isEmpty(pDto.getsElectricityFileName())){ %> @@##@@/page/project/wechat/m500point/img/box_picture.png"> <%} %>
施工机械 checked<%} %>>是 checked<%} %>>否 <%-- ${pointQualitySecurityDto.sMachineryFileName } --%> @@##@@/page/project/wechat/m500point/img/camera_picture.png"> <%if(!StringUtils.isEmpty(pDto.getsMachineryFileName())){ %> @@##@@/page/project/wechat/m500point/img/box_picture.png"> <%} %>
质量
检查项目 实际得分 是否合格 拍照
石灰质量 checked<%} %>>是 checked<%} %>>否 <%-- ${pointQualitySecurityDto.qLimeFileName } --%> @@##@@/page/project/wechat/m500point/img/camera_picture.png"> <%if(!StringUtils.isEmpty(pDto.getqLimeFileName())){ %> @@##@@/page/project/wechat/m500point/img/box_picture.png"> <%} %>
水泥质量 checked<%} %>>是 checked<%} %>>否 <%-- ${pointQualitySecurityDto.qCementFileName } --%> @@##@@/page/project/wechat/m500point/img/camera_picture.png"> <%if(!StringUtils.isEmpty(pDto.getqCementFileName())){ %> @@##@@/page/project/wechat/m500point/img/box_picture.png"> <%} %>
桩的数量
、类型、
布置形式
checked<%} %>>是 checked<%} %>>否 <%-- ${pointQualitySecurityDto.qPileCountFileName } --%> @@##@@/page/project/wechat/m500point/img/camera_picture.png"> <%if(!StringUtils.isEmpty(pDto.getqPileCountFileName())){ %> @@##@@/page/project/wechat/m500point/img/box_picture.png"> <%} %>
材料的配
合比例
checked<%} %>>是 checked<%} %>>否 <%-- ${pointQualitySecurityDto.qFillingFileName } --%> @@##@@/page/project/wechat/m500point/img/camera_picture.png"> <%if(!StringUtils.isEmpty(pDto.getqFillingFileName())){ %> @@##@@/page/project/wechat/m500point/img/box_picture.png"> <%} %>
施工工艺 checked<%} %>>是 checked<%} %>>否 <%-- ${pointQualitySecurityDto.qTechnologyFileName } --%> @@##@@/page/project/wechat/m500point/img/camera_picture.png"> <%if(!StringUtils.isEmpty(pDto.getqTechnologyFileName())){ %> @@##@@/page/project/wechat/m500point/img/box_picture.png"> <%} %>
桩的密实
checked<%} %>>是 checked<%} %>>否 <%-- ${pointQualitySecurityDto.qPileDensityFileName } --%> @@##@@/page/project/wechat/m500point/img/camera_picture.png"> <%if(!StringUtils.isEmpty(pDto.getqPileDensityFileName())){ %> @@##@@/page/project/wechat/m500point/img/box_picture.png"> <%} %>
地基承载
checked<%} %>>是 checked<%} %>>否 <%-- ${pointQualitySecurityDto.qBearingFileName } --%> @@##@@/page/project/wechat/m500point/img/camera_picture.png"> <%if(!StringUtils.isEmpty(pDto.getqBearingFileName())){ %> @@##@@/page/project/wechat/m500point/img/box_picture.png"> <%} %>

   

6. 查看页面  

<%@ taglib prefix="spring" uri="http://www.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")); %>
安全/质量填报




 
 
工程部位(工点) 检查人 检查时间
${pointQualitySecurityDto.pointProject } ${pointQualitySecurityDto.recordPerson } ${pointQualitySecurityDto.recordDate }
安全
检查项目 实际得分 是否合格 附件
安全施工 ${pointQualitySecurityDto.sSecurityScore } ${pointQualitySecurityDto.isSSecurity } <%if(!StringUtils.isEmpty(pDto.getsSecurityFileName())){ %> @@##@@/page/project/wechat/m500point/img/box_picture.png"> <%} %>
文明施工 ${pointQualitySecurityDto.sCiviliztionScore } ${pointQualitySecurityDto.isSCiviliztion } <%if(!StringUtils.isEmpty(pDto.getsCiviliztionFileName())){ %> @@##@@/page/project/wechat/m500point/img/box_picture.png"> <%} %>
脚手架 ${pointQualitySecurityDto.sScaffoldScore } ${pointQualitySecurityDto.isSScaffold } <%if(!StringUtils.isEmpty(pDto.getsScaffoldFileName())){ %> @@##@@/page/project/wechat/m500point/img/box_picture.png"> <%} %>
基坑支撑 ${pointQualitySecurityDto.sFounationScore } ${pointQualitySecurityDto.isSFounation } <%if(!StringUtils.isEmpty(pDto.getsFounationFileName())){ %> @@##@@/page/project/wechat/m500point/img/box_picture.png"> <%} %>
外用电梯 ${pointQualitySecurityDto.sLiftScore } ${pointQualitySecurityDto.isSLift } <%if(!StringUtils.isEmpty(pDto.getsLiftFileName())){ %> @@##@@/page/project/wechat/m500point/img/box_picture.png"> <%} %>
施工用电 ${pointQualitySecurityDto.sElectricityScore } ${pointQualitySecurityDto.isSElectricity } <%if(!StringUtils.isEmpty(pDto.getsElectricityFileName())){ %> @@##@@/page/project/wechat/m500point/img/box_picture.png"> <%} %>
施工机械 ${pointQualitySecurityDto.sMachineryScore } ${pointQualitySecurityDto.isSMachinery } <%if(!StringUtils.isEmpty(pDto.getsMachineryFileName())){ %> @@##@@/page/project/wechat/m500point/img/box_picture.png"> <%} %>
质量
检查项目 实际得分 是否合格 附件
石灰质量 ${pointQualitySecurityDto.qLimeScore } ${pointQualitySecurityDto.isQLime } <%if(!StringUtils.isEmpty(pDto.getqLimeFileName())){ %> @@##@@/page/project/wechat/m500point/img/box_picture.png"> <%} %>
水泥质量 ${pointQualitySecurityDto.qCementScore } ${pointQualitySecurityDto.isQCement } <%if(!StringUtils.isEmpty(pDto.getqCementFileName())){ %> @@##@@/page/project/wechat/m500point/img/box_picture.png"> <%} %>
桩的数量
、类型、
布置形式
${pointQualitySecurityDto.qPileCountScore } ${pointQualitySecurityDto.isQPileCount } <%if(!StringUtils.isEmpty(pDto.getqPileCountFileName())){ %> @@##@@/page/project/wechat/m500point/img/box_picture.png"> <%} %>
材料的配
合比例
${pointQualitySecurityDto.qFillingScore } ${pointQualitySecurityDto.isQFilling } <%if(!StringUtils.isEmpty(pDto.getqFillingFileName())){ %> @@##@@/page/project/wechat/m500point/img/box_picture.png"> <%} %>
施工工艺 ${pointQualitySecurityDto.qTechnologyScore } ${pointQualitySecurityDto.isQTechnology } <%if(!StringUtils.isEmpty(pDto.getqTechnologyFileName())){ %> @@##@@/page/project/wechat/m500point/img/box_picture.png"> <%} %>
桩的密实
${pointQualitySecurityDto.qPileDensityScore } ${pointQualitySecurityDto.isQPileDensity } <%if(!StringUtils.isEmpty(pDto.getqPileDensityFileName())){ %> @@##@@/page/project/wechat/m500point/img/box_picture.png"> <%} %>
地基承载
${pointQualitySecurityDto.qBearingScore } ${pointQualitySecurityDto.isQBearing } <%if(!StringUtils.isEmpty(pDto.getqBearingFileName())){ %> @@##@@/page/project/wechat/m500point/img/box_picture.png"> <%} %>

  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+"/";
%>














质量/安全列表



工程部位(工点): 记录人: 记录时间: 检查类型: 详细:
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教程

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

微信是一款手机通信软件,支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊,还能根据地理位置找到附近的人,带给大家全新的移动沟通体验,有需要的小伙伴快来保存下载体验吧!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Python 序列化
Python 序列化

本专题整合了python序列化、反序列化相关内容,阅读专题下面的文章了解更多详细内容。

12

2026.02.02

AO3官网入口与中文阅读设置 AO3网页版使用与访问
AO3官网入口与中文阅读设置 AO3网页版使用与访问

本专题围绕 Archive of Our Own(AO3)官网入口展开,系统整理 AO3 最新可用官网地址、网页版访问方式、正确打开链接的方法,并详细讲解 AO3 中文界面设置、阅读语言切换及基础使用流程,帮助用户稳定访问 AO3 官网,高效完成中文阅读与作品浏览。

200

2026.02.02

主流快递单号查询入口 实时物流进度一站式追踪专题
主流快递单号查询入口 实时物流进度一站式追踪专题

本专题聚合极兔快递、京东快递、中通快递、圆通快递、韵达快递等主流物流平台的单号查询与运单追踪内容,重点解决单号查询、手机号查物流、官网入口直达、包裹进度实时追踪等高频问题,帮助用户快速获取最新物流状态,提升查件效率与使用体验。

98

2026.02.02

Golang WebAssembly(WASM)开发入门
Golang WebAssembly(WASM)开发入门

本专题系统讲解 Golang 在 WebAssembly(WASM)开发中的实践方法,涵盖 WASM 基础原理、Go 编译到 WASM 的流程、与 JavaScript 的交互方式、性能与体积优化,以及典型应用场景(如前端计算、跨平台模块)。帮助开发者掌握 Go 在新一代 Web 技术栈中的应用能力。

15

2026.02.02

PHP Swoole 高性能服务开发
PHP Swoole 高性能服务开发

本专题聚焦 PHP Swoole 扩展在高性能服务端开发中的应用,系统讲解协程模型、异步IO、TCP/HTTP/WebSocket服务器、进程与任务管理、常驻内存架构设计。通过实战案例,帮助开发者掌握 使用 PHP 构建高并发、低延迟服务端应用的工程化能力。

16

2026.02.02

Java JNI 与本地代码交互实战
Java JNI 与本地代码交互实战

本专题系统讲解 Java 通过 JNI 调用 C/C++ 本地代码的核心机制,涵盖 JNI 基本原理、数据类型映射、内存管理、异常处理、性能优化策略以及典型应用场景(如高性能计算、底层库封装)。通过实战示例,帮助开发者掌握 Java 与本地代码混合开发的完整流程。

9

2026.02.02

go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

62

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

56

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

28

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.2万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 10.2万人学习

JS进阶与BootStrap学习
JS进阶与BootStrap学习

共39课时 | 3.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号