积分商城商品管理系统 - 商品列表
<div id="position" class="Fixed_layer">
<!-- 查询模块 -->
<div class="controls-row" style="padding:30px;font-size:15px;font-weight: bold">
商品名称:<input type="text" id="productName" name="name" size="10px" style="margin-left:5px;margin-right:10px" />
商品数量:<input type="text" id="productCount" name="count" size="10px" style="margin-left:5px;margin-right:10px" />
商品价格:<input type="text" id="productPrice" name="price" size="10px" style="margin-left:5px;margin-right:10px" />
商品描述:<input type="text" id="productBrief" name="brief" size="10px" style="margin-left:5px;margin-right:10px" />
状态:
<select style="margin-left:5px;width: 195px;" id="productState">
<option value ='99' selected = 'selected'>全部</option>
<option value ='0'>上架</option>
<option value ='1'>下架</option>
</select>
<button class="btn btn-primary btn-sm glyphicon glyphicon-search"
name="bookList_search" style="margin-left:10px" onclick="bookList_search()">查询</button>
</div>
<!-- 按钮功能组 -->
<div class="controls controls-row" style="padding: 15px; padding-left: 100px">
<button class="btn btn-primary btn-sm glyphicon glyphicon-plus" name="bookList_add" style="margin-left:10px;"
onclick="bookList_add()">新增</button>
<button class="btn btn-primary btn-sm glyphicon glyphicon-pencil" name="bookList_edit" style="margin-left:10px;"
onclick="bookList_edit()">修改</button>
<button class="btn btn-primary btn-sm glyphicon glyphicon-minus" name="booklist_delete" style="margin-left:10px;"
onclick="bookList_delete()">删除</button>
<button class="btn btn-primary btn-sm glyphicon glyphicon-picture" name="booklist_delete" style="margin-left:10px;"
onclick="bookList_uploadImage()">上传图片</button>
<a href="${pageContext.request.contextPath }/book/excelExport.do" >
<button class="btn btn-primary btn-sm glyphicon glyphicon-new-window" name="booklist_delete" style="margin-left:10px;"
>Excel导出</button>
</a>
</div>
</div>
<pre><code><!-- 用户管理模块-普通用户 -->
<table id="bookListTable"></table>
</code></pre>
</body>
<script type="text/javascript">
<pre><code></script>
</code></pre>
</html>
<p>//初始化参数
var productId;
var productName;
var productImage;
var productCount;
var productPrice;
var productBrief;
var productState;</p>
<p>var ctx='http://localhost:6060/';</p>
<p>//初始化表格的列
bookList_initColumn = function () {
var columns = [
{field: 'selectItem', radio: true, visible: true},
{title: 'id', field: 'productId', visible: false, align: 'center', valign: 'middle'},
{title: '商品名称', field: 'productName', visible: true, align: 'center', valign: 'middle', sortable: true},
{title: '商品图片', field: 'productImage', visible: true, align: 'center', valign: 'middle', sortable: true,
formatter:function (value,row,index)
{
return '<img src='+value+' width="50" height="50" class="img-rounded" >';
}
},
{title: '商品数量', field: 'productCount', visible: true, align: 'center', valign: 'middle', sortable: true},
{title: '商品积分价格', field: 'productPrice', visible: true, align: 'center', valign: 'middle', sortable: true},
{title: '商品描述', field: 'productBrief', visible: true, align: 'center', valign: 'middle', sortable: true},
{title: '商品状态', field: 'productState', align: 'center', valign: 'middle', sortable: true,
formatter: function (value, row, index) {
if(value == 0){
return '上架';
}
else{
return '下架';
}
}}
];
return columns;
};</p>
<p>/**</p>
<ul>
<li>检查是否选中
*/
bookList_check = function () {
//获得row数组
var rows = $("#bookListTable").bootstrapTable('getSelections');
if (rows.length == 0) {
return false;
} else {
return true;
}
};</li>
</ul>
<p>//删除
bookList_delete = function () {
if(bookList_check()){
//获得当前选中行对象
var rows = $("#bookListTable").bootstrapTable('getSelections');
//获得选中id
var id = rows[0].id;
//发送ajax执行删除
$.ajax({
url:ctx+"/book/remove.do",
type:"POST",
data:{"id":id},
success:function(data){
//成功操作
if(data == true){
layer.msg("删除成功");
$("#bookListTable").bootstrapTable('refresh');
}
//失败操作
else{
layer.msg("删除失败");
}
},
dataType:"json"
});</p>
<pre><code>}
else{
layer.msg("请先选中至少一条记录！");
}
</code></pre>
<p>};</p>
<p>//添加
bookList_add = function(){
var index = layer.open({
type: 2,
title: '添加用户',
area: ['500px', '500px'], //宽高
fix: false, //不固定
maxmin: true,
content: ctx + '/static/page/main/proMgr/bookList_add.jsp'
});
this.layerIndex = index;
}</p>
<p>//修改
bookList_edit = function(){
if(bookList_check()){
//获得当前选中行对象
var rows = $("#bookListTable").bootstrapTable('getSelections');
//获得参数
var id = rows[0].id;
var name = rows[0].name;
var imagePath = rows[0].imagePath;
var count = rows[0].count;
var price = rows[0].price;
var brief = rows[0].brief;
var state = rows[0].state;
//layer打开子窗口
var index = layer.open({
type: 2,
title: '修改用户',
area: ['500px', '520px'], //宽高
fix: false, //不固定
maxmin: true,
content: ctx + '/static/page/main/proMgr/bookList_edit.jsp',
//向子窗口传参
data:{
id:id,
name:name,
imagePath:imagePath,
count:count,
price:price,
brief:brief,
state:state,
},
});
this.layerIndex = index;
}
else{
layer.msg("请先选中至少一条记录！");</p>
<pre><code>}
</code></pre>
<p>}</p>
<p>//excel导出
function bookList_export(){
alert("excel导出");
//发送ajax执行删除
$.ajax({
url:ctx+"/book/excelExport.do",
type:"POST",
success:function(data){
//成功操作
if(data == true){
layer.msg("导出成功");
//$("#bookListTable").bootstrapTable('refresh');
}
//失败操作
else{
layer.msg("导出失败");
}
},
dataType:"json"
});
}</p>
<p>//上传图片
bookList_uploadImage = function(){
if(bookList_check()){
//获得当前选中行对象
var rows = $("#bookListTable").bootstrapTable('getSelections');
//获得参数
var id = rows[0].id;
var name = rows[0].name;
var index = layer.open({
type: 2,
title: '添加用户',
area: ['500px', '500px'], //宽高
fix: false, //不固定
maxmin: true,
content: ctx + '/static/page/main/proMgr/bookList_uploadImage.jsp',
//向子窗口传参
data:{
id:id,
name:name
}
});
this.layerIndex = index;
}
else{
layer.msg("请先选中至少一条记录！");</p>
<pre><code>}
</code></pre>
<p>}</p>
<p>//收集参数
function collectParam(){
name = $("#name").val();
state = $("#state").val();
}</p>
<p>//BootStrap查询
function bookList_search() {
//收集参数
collectParam();
console.log("state: "+state);
var opt = {
url: ctx+"/book/queryCondition.do",
silent: true,
query:{
name: name,
state: state,
}
};
$("#bookListTable").bootstrapTable('refresh',opt);
};</p>
<p>$(
function(){
var column = bookList_initColumn();
$("#bookListTable").bootstrapTable({
contentType: "application/x-www-form-urlencoded",
url: ctx+'/book/queryList.do',
method: 'post', //ajax方式,post还是get
//toolbar: "#toolbar", //顶部工具条
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true
sortable: true, //是否启用排序
sortOrder: "desc", //排序方式
pagination: true, //启用分页
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 5, //每页的记录行数（<em>）
pageList: [5, 10, 15,'All'], //可供选择的每页的行数（</em>）
queryParamsType: 'limit', //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
queryParams:{"param":"testData"}, // 向后台传递的自定义参数
sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端
strictSearch: true, //设置为 true启用 全匹配搜索，否则为模糊搜索
showColumns: true, //是否显示所有的列
showRefresh: false, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
searchOnEnterKey: true, //设置为 true时，按回车触发搜索方法，否则自动触发搜索方法//pagination: true, //是否显示分页条
height: 365, //底部栏高
icons: {
refresh: 'glyphicon-repeat',
toggle: 'glyphicon-list-alt',
columns: 'glyphicon-list'
},
iconSize: 'outline',</p>
<pre><code> columns:column,//列数组
});
});
</code></pre>
<p>为什么页面不会显示列表内容：可能是因为存在一些 JavaScript 错误或者后台数据没有正常返回导致的。我们可以先检查一下控制台是否有报错信息，然后再检查一下后台接口是否能够正常返回数据。如果有报错信息，可以根据报错信息进行调试；如果后台接口没有正常返回数据，可以检查一下接口是否存在问题，或者检查一下前端请求接口的参数是否正确。</p>
原文地址: https://www.cveoy.top/t/topic/nieA 著作权归作者所有。请勿转载和采集!