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

前端之家收集整理的这篇文章主要介绍了BootStrap轻松实现微信页面开发代码分享前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1. 行长度:

2.modal

3. 事例

<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 物料
名称:${materialDto.projectName }
名称:${materialDto.name }
${materialDto.inDate }
数量:${materialDto.inQuantity }
${materialDto.inLeader }
出库列表

4. js文件

获取数据 contentType: "application/x-www-form-urlencoded",striped: true,//表格显示条纹 pageSize: 10,//每页显示的记录数 pageNumber:1,//当前第几页 pageList: [5,10,15,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,添加页面

<%@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+"/"; %> <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

6. 查看页面

<%@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+"/"; %> <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

7. 列表页

<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
数量:
工程部位(工点):

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,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轻松实现微信页面开发代码分享。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/bootstrap/44989.html

猜你在找的Bootstrap相关文章