SSM项目实践与AngularJs、dataTable和zTree应用总结
这篇博客总结了作者完成SSM黑马商城项目后的感想和部分技术点的学习。虽然整体感觉收获不大，但作者提到了在项目中应用AngularJs的基础操作，包括环境搭建、分层架构、数据绑定和事件处理等。此外，还介绍了如何使用dataTable数据表格以及zTree的相关配置和数据格式。
1.敲完代码后的总结
- 第一感觉就是没什么收获。ssm的特点都没有用到。
- 只是为了完成功能，没有缓存，没有事务。
- 数据库代码都是现成的，基本上没有写sql，都是单表操作。
2.还是有一点点收获
2.1 angularJs的基本使用
只是列举项目中用到的内容
环境搭建：导入angular的js文件，以及依赖的js
angular分层：controller，service
- 提供一个base.js负责提取angular的公共代码定义
var app = angular.module('XXX_angular', []);
- 定义Controller
app.controller('XXXController', function($scope,XXXService) {
$scope.XXX= function(){
/*controller中定义的方法，XXX是方法名
通常controller都会调用service层去请求数据,
所以在Controller的function中需要应用XXXService，
这样就可以调用XXXService中的方法
*/
XXXService.XXX(/*参数*/).success(function(response){
/*
调用方法当然可以传递参数，
response是返回值
通常在这里对查询到的数据进行处理
*/
alert(response);
});
}
});
- 定义Service
app.service('XXXService', function($http) {
this.XXX = function (/*参数*/XX) {
return $http.post("请求后台",/*请求参数*/XXX);
}
/*
根据名称查询Product
*/
this.findProductByName = function (name) {
return $http.post("../product/findProductByName.do",name);
}
});
- 页面要使用angular
<!--
ng-app="XXX_angular"：
指定作用范围，可以是任何标签，通常在body标签中，这样可以作用在整个html
ng-controller="XXXController"
指定Controller名称必须和Controller中的一样
ng-init="findSlideshowImg()"
指定初始化方法，一般做页面初始化数据的作用
-->
<!--
引入js的步骤，
1.原生的js源码包
2.jQuery
3.angular.js
4.base.js
(baseService)
5.service
(baseController)
6.controller
-->
<body ng-app="portal_angular"
ng-controller="XXXController"
ng-init="findSlideshowImg()">
-
angular
ng-model=“数据绑定”
下拉框绑定数据
ng-options=“brand.id as brand.name for brand in brandlist”
$scope.XXX全局关键字
ng-click=“点击事件”
ng-src=“请求地址”
ng-href=“请求地址”
{{取值}}
ng-repeat="adContent in adContents"循环标签 -
绑定数据的固定做法
赋值
ng-model="productInfo.product.price"
ng-model="productInfo.productDesc.introduction"
取值
$scope.productInfo = {product:{},productDesc:{}};
值的传递必须以对象的形式
ng-model="stringvalue"
var str = $scope.stringvalue;
这样是取不到值的，必须要
ng-model="stringInfo.stringvalue"
var str = $scope.stringInfo.stringvalue;
把字符串变成对象
- 继承某个controller
app.controller('productsController', function($scope,$controller){
/*继承controller，注意js的引用*/
$controller('baseController',{$scope:$scope});
});
- $location
$location.href = “”；页面跳转
var productId = $location.search().pId;获取请求参数
2.2 dataTable数据表格的使用
- 引入相关js
<script src="assets/js/jquery.dataTables.min.js"></script>
- 定义好table标签，并且把表格头定义好
<table class="table table-striped table-bordered table-hover" id="sample-table">
<thead>
<tr>
<th width="25px"><label><input type="checkbox" class="ace"><span class="lbl"></span></label></th>
<th width="80px">产品编号</th>
<th width="250px">产品名称</th>
<th width="100px">销售价(保护价)</th>
<th width="100px">商城价</th>
<th width="100px">所属地区/国家</th>
<th width="180px">加入时间</th>
<th width="80px">审核状态</th>
<th width="70px">状态</th>
<th width="200px">操作</th>
</tr>
</thead>
</table>
数据源和数据的定义
var oTable1 = $('#sample-table').DataTable( {
ajax:{
url : "请求后台得到数据"
},
pageLength : 3,
columns : [{
"data" : null 根据请求得到的数据对表格进行填充
第一行是复选框，所以不用数据
},{
"data" : "id"
}],
"aaSorting": [[ 1, "desc" ]],//默认第几个排序
"bStateSave": true,//状态保存
"aoColumnDefs": [
//{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
{"orderable":false,"aTargets":[0,2,3,4,5,8,9]}// 制定列不参与排序
] } );
项目中的数据填充例子
/**
* 从指定的数据文件加载数据:可以是".txt",".json"
*/
$(function() {
var ss = false;
var t = $('#sample-table').DataTable({
ajax : {
// 指定数据源
// http://localhost:8082/itzpx-shop/brandController/findBrandAll.do
url : "../adCategroyController/findadCatContentAll.do"//返回json格式的数据(注意:不要跨域)
},
columns : [ {//每列绑定的数据(和数据源中返回的数据对应,data:"param" param要和返回的json数据中的属性对应)
"data" : null
// 此列不绑定数据源，用来显示序号
}, {
"data" : "id"
}, {
"data" : "name"
}, {
"data" : "num"
}, {
"data" : "desc"
}, {
"data" : "createTime"
}, {
"data" : "status"
}, {
"data" : "id"
}],
columnDefs: [
{
//复选框
"targets": 0,
"orderable" : false ,
"render": function(data, type, row, meta) {
return '<div width="25px"><label><input type="checkbox" class="ace" ><span class="lbl"></span></label></div>'
}
},
{
//广告Id
"targets": 1,
"render": function(data, type, row, meta) {
return '<div width="80px">'+data+'</div>'
}
},
{
//广告排序
"targets": 2,
"orderable" : false,
"render": function(data, type, row, meta) {
return '<div>'+data+'</div>'
}
},
{
//广告分类
"targets": 3,
"render": function(data, type, row, meta) {
return '<div>'+data+'</div>'
}
},
{
//图片
"targets": 4,
"render": function(data, type, row, meta) {
return '<div>'+data+'</div>'
}
},
{
//尺寸
"targets": 5,
"orderable" : false,
"render": function(data, type, row, meta) {
return '<div>'+data+'</div>'
}
},
{
//状态
"targets": 6,
"orderable" : false,
"render": function(data, type, row, meta) {
if("Y"==data){
ss = true;
return '<div class="td-status"><span class="label label-success radius">已启用</span></div>';
}
ss = false;
return '<div class="td-status"><span class="label label-defaunt radius">已禁用</span></div>'
}
},
{
//按钮
"targets": 7,
"orderable" : false,
"render": function(data, type, row, meta) {
var str = null;
if (ss) {
str =
'<div class="td-manage">'+
'<a onClick="member_stop(this,\''+data+'\')" href="javascript:;" title="停用" class="btn btn-xs btn-success"><i class="fa fa-check bigger-120"></i></a>'+
'<a title="编辑" οnclick="member_edit(\'编辑\',\'member-add.html\',\''+data+'\',\'\',\'510\')" href="javascript:;" class="btn btn-xs btn-info" ><i class="fa fa-edit bigger-120"></i></a>'+
'<a title="删除" href="javascript:;" οnclick="member_del(this,\''+data+'\')" class="btn btn-xs btn-warning" ><i class="fa fa-trash bigger-120"></i></a>'+
'<a href="javascript:ovid()" name="Ads_list.html" class="btn btn-xs btn-pink ads_link" οnclick="AdlistOrders(\''+data+'\');" title="幻灯片广告列表"><i class="fa fa-bars bigger-120"></i></a>'+
'</div>';
}else{
str =
'<div class="td-manage">'+
'<a onClick="member_start(this,\''+data+'\')" href="javascript:;" title="启用" class="btn btn-xs"><i class="fa fa-close bigger-120"></i></a>'+
'<a title="编辑" οnclick="member_edit(\'编辑\',\'member-add.html\',\''+data+'\',\'\',\'510\')" href="javascript:;" class="btn btn-xs btn-info" ><i class="fa fa-edit bigger-120"></i></a>'+
'<a title="删除" href="javascript:;" οnclick="member_del(this,\''+data+'\')" class="btn btn-xs btn-warning" ><i class="fa fa-trash bigger-120"></i></a>'+
'<a href="javascript:ovid()" name="Ads_list.html" class="btn btn-xs btn-pink ads_link" οnclick="AdlistOrders(\''+data+'\');" title="幻灯片广告列表"><i class="fa fa-bars bigger-120"></i></a>'+
'</div>';
}
return str;
}
}
],
"lengthMenu": [10, 25, 50, 75, 100], //指定每页数量
});
});
2.3 zTree
- 引入css引入js
<link rel="stylesheet" href="Widget/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="Widget/zTree/js/jquery.ztree.all-3.5.min.js"></script>
- 指定zTree的位置
<div id="treeDemo" class="ztree"></div>
- 初始化
$(document).ready(function(){
var t = $("#treeDemo");
/*主要是这句话
t：树状图的div
setting：样式，及点击事件的定义
zNodes：数据源*/
t = $.fn.zTree.init(t, setting, zNodes);
demoIframe = $("#testIframe");
demoIframe.bind("load", loadReady);
var zTree = $.fn.zTree.getZTreeObj("tree");
zTree.selectNode(zTree.getNodeByParam("id",'11'));
});
setting
app.controller('baseController', function($scope) {
$scope.setting = {
view: {
dblClickExpand: false,
showLine: false,
selectedMulti: false
},
data: {
simpleData: {
enable:true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback: {
beforeClick: function(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("tree");
if (treeNode.isParent) {
zTree.expandNode(treeNode);
return false;
} else {
// alert(treeNode.name+":"+treeNode.id);
// var url = $('#sample-table').DataTable().ajax.url("../product/findProductAll.do");
// url.load();
return true;
}
}
}
};
});
数据格式
[
{ id:1, pId:0, name:"商城分类列表", open:true},
{ id:2, pId:0, name:"商城分类列表", open:true},
{ id:3, pId:0, name:"商城分类列表", open:true}
]
类的封装，需要返回zTree的数据，封装到该类中即可
public class ProductCategoryZtree {
//{ id:1, pId:0, name:"商城分类列表", open:true},
private Long id;
private Long pId;
private String name;
private boolean open;
扫一扫
1011
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
