1.html页面
<!-- angularJS -->
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"> </script>
<!-- 分页 -->
<script src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<!-- js块 -->
<script type="text/javascript" src="../js/base_pagination.js"> </script>
<script type="text/javascript" src="../js/angular-select2.js"> </script>
<script type="text/javascript" src="../js/service/typeTemplateService.js"> </script>
<script type="text/javascript" src="../js/service/brandService.js"> </script>
<script type="text/javascript" src="../js/service/specificationService.js"> </script>
<script type="text/javascript" src="../js/controller/baseController.js"> </script>
<script type="text/javascript" src="../js/controller/typeTemplateController.js"> </script>
</head>
<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="typeTemplateController" ng-init="findBrandListAndSpecList()" >
<!-- .box-body -->
<div class="box-header with-border">
<h3 class="box-title">商品类型模板管理</h3>
</div>
<div class="box-body">
<!-- 数据表格 -->
<div class="table-box">
<!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ng-click="entity={customAttributeItems:[]}"><i class="fa fa-file-o"></i> 新建</button>
<button type="button" class="btn btn-default" title="删除" ng-click="dele()"><i class="fa fa-trash-o"></i> 删除</button>
<button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
</div>
</div>
</div>
<div class="box-tools pull-right">
<div class="has-feedback">
分类模板名称:<input >
<button class="btn btn-default">查询</button>
</div>
</div>
<!--工具栏/-->
<!--数据列表-->
<table id="dataList" class="table table-bordered table-striped table-hover dataTable">
<thead>
<tr>
<th class="" style="padding-right:0px">
<input id="selall" type="checkbox" class="icheckbox_square-blue">
</th>
<th class="sorting_asc">模板ID</th>
<th class="sorting">分类模板名称</th>
<th class="sorting">关联品牌</th>
<th class="sorting">关联规格</th>
<th class="sorting">扩展属性</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="entity in list">
<td><input type="checkbox" ng-click="updateSelection($event, entity.id)"></td>
<td>{{entity.id}}</td>
<td>{{entity.name}}</td>
<td>{{jsonToString(entity.brandIds,'text')}}</td>
<td>{{jsonToString(entity.specIds,'text')}}</td>
<td>{{jsonToString(entity.customAttributeItems,'text')}}</td>
<td class="text-center">
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" ng-click="findOne(entity.id)">修改</button>
</td>
</tr>
</tbody>
</table>
<!--数据列表/-->
<tm-pagination conf="paginationConf"></tm-pagination>
</div>
<!-- 数据表格 /-->
</div>
<!-- /.box-body -->
<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">商品类型模板编辑</h3>
</div>
<div class="modal-body">
<table class="table table-bordered table-striped" width="800px">
<tr>
<td>商品类型</td>
<td><input class="form-control" placeholder="商品类型" ng-model="entity.name"> </td>
</tr>
<tr>
<td>关联品牌</td>
<td>
<input select2 select2-model="entity.brandIds" config="brandList"
multiple placeholder="选择品牌(可多选)" class="form-control" type="text" ng-model="entity.customAttributeItems.brandIds"/>
</td>
</tr>
<tr>
<td>关联规格</td>
<td>
<input select2 select2-model="entity.specIds" config="SpecificationList"
multiple placeholder="选择规格(可多选)" class="form-control" type="text" ng-model="entity.customAttributeItems.specIds"/>
</td>
</tr>
<tr>
<td>扩展属性</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-default" title="新增扩展属性" ng-click="addTableRow()"><i class="fa fa-file-o"></i> 新增扩展属性</button>
</div>
<table class="table table-bordered table-striped" width="800px">
<thead>
<tr>
<td><input type="checkbox" class="icheckbox_square-blue"></td>
<td>属性名称</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="pojo in entity.customAttributeItems">
<td><input type="checkbox" class="icheckbox_square-blue" ></td>
<td><input class="form-control" placeholder="属性名称" ng-model="pojo.text"></td>
<td><button type="button" class="btn btn-default" title="删除" ng-click=deleSpecOption($index)><i class="fa fa-trash-o"></i> 删除</button></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" ng-click="save()">保存</button>
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
</div>
</div>
</div>
</div>
</body>
</html>
2.base.js
//设定指定模块,引用分页pagination模块
var app = angular.module("pinyougou", [ ]);
3.分页.js
var app=angular.module('pinyougou',['pagination']);
4.select2.js
/**
* select2封装
* @param {scope} ng-model 选中的ID
* @param {scope} select2-model 选中的详细内容
* @param {scope} config 自定义配置
* @param {String} [query] 内置的配置 (怎么也还得默认一个config)
* @example
* <input select2 ng-model="a" select2-model="b" config="config" type="text" placeholder="占位符" />
* <input select2 ng-model="a" select2-model="b" config="default" query="member" type="text" placeholder="占位符" />
* <select select2 ng-model="b" class="form-control"></select>
*/
app.directive('select2', function () {
return {
restrict: 'A',
scope: {
config: '=',
ngModel: '=',
select2Model: '='
},
link: function (scope, element, attrs) {
// 初始化
var tagName = element[0].tagName,
config = {
allowClear: true,
multiple: !!attrs.multiple,
placeholder: attrs.placeholder || ' ' // 修复不出现删除按钮的情况
};
// 生成select
if(tagName === 'SELECT') {
// 初始化
var $element = $(element);
delete config.multiple;
angular.extend(config, scope.config);
$element
.prepend('<option value=""></option>')
.val('')
.select2(config);
// model - view
scope.$watch('ngModel', function (newVal) {
setTimeout(function () {
$element.find('[value^="?"]').remove(); // 清除错误的数据
$element.select2('val', newVal);
},0);
}, true);
return false;
}
// 处理input
if(tagName === 'INPUT') {
// 初始化
var $element = $(element);
// 获取内置配置
if(attrs.query) {
scope.config = select2Query[attrs.query]();
}
// 动态生成select2
scope.$watch('config', function () {
angular.extend(config, scope.config);
$element.select2('destroy').select2(config);
}, true);
// view - model
$element.on('change', function () {
scope.$apply(function () {
scope.select2Model = $element.select2('data');
});
});
// model - view
scope.$watch('select2Model', function (newVal) {
$element.select2('data', newVal);
}, true);
// model - view
scope.$watch('ngModel', function (newVal) {
// 跳过ajax方式以及多选情况
if(config.ajax || config.multiple) { return false }
$element.select2('val', newVal);
}, true);
}
}
}
});
//angular.bootstrap(document, ['app']);
4.controller.js
//控制层
app.controller('typeTemplateController' ,function($scope,$controller ,typeTemplateService,brandService,specificationService){
$controller('baseController',{$scope:$scope});//继承
//读取列表数据绑定到表单中
$scope.findAll=function(){
typeTemplateService.findAll().success(
function(response){
$scope.list=response;
}
);
}
//分页
$scope.findPage=function(page,rows){
typeTemplateService.findPage(page,rows).success(
function(response){
$scope.list=response.rows;
$scope.paginationConf.totalItems=response.total;//更新总记录数
}
);
}
//查询实体
$scope.findOne=function(id){
typeTemplateService.findOne(id).success(
function(response){
$scope.entity=response;
$scope.entity.specIds=JSON.parse($scope.entity.specIds);
$scope.entity.brandIds=JSON.parse($scope.entity.brandIds);
$scope.entity.customAttributeItems=JSON.parse($scope.entity.customAttributeItems);
}
);
}
//保存
$scope.save=function(){
var serviceObject;//服务层对象
if($scope.entity.id!=null){//如果有ID
serviceObject=typeTemplateService.update( $scope.entity ); //修改
}else{
serviceObject=typeTemplateService.add( $scope.entity );//增加
}
serviceObject.success(
function(response){
if(response.success){
//重新查询
$scope.reloadList();//重新加载
}else{
alert(response.message);
}
}
);
}
//批量删除
$scope.dele=function(){
if(confirm('你确定删除ID:[' +$scope.selectIds+ ']的信息吗?')){
//获取选中的复选框
typeTemplateService.dele( $scope.selectIds ).success(
function(response){
if(response.success){
alert(response.message);
$scope.reloadList();//刷新列表
$scope.selectIds=[];
}
}
);
}
}
$scope.searchEntity={};//定义搜索对象
//搜索
$scope.search=function(page,rows){
typeTemplateService.search(page,rows,$scope.searchEntity).success(
function(response){
$scope.list=response.rows;
$scope.paginationConf.totalItems=response.total;//更新总记录数
}
);
}
$scope.addTableRow=function(){
$scope.entity.customAttributeItems.push({});
}
//品牌列表
$scope.brandList={data:[]};
//规格列表
$scope.SpecificationList={data:[]}
//获取品牌列表和规格列表
$scope.findBrandListAndSpecList=function(){
//读取品牌列表
brandService.selectBrandOptionList().success(function(response){
$scope.brandList={data:response};
});
//读取规格列表
specificationService.selectSpecificationOptionList().success(function(response){
$scope.SpecificationList={data:response};
});
}
$scope.deleSpecOption=function(index){
$scope.entity.customAttributeItems.splice(index,1);
}
});
5.service.js
//服务层
app.service('typeTemplateService',function($http){
//读取列表数据绑定到表单中
this.findAll=function(){
return $http.get('../typeTemplate/findAll.do');
}
//分页
this.findPage=function(page,rows){
return $http.get('../typeTemplate/findPage.do?page='+page+'&rows='+rows);
}
//查询实体
this.findOne=function(id){
return $http.get('../typeTemplate/findOne.do?id='+id);
}
//增加
this.add=function(entity){
return $http.post('../typeTemplate/add.do',entity );
}
//修改
this.update=function(entity){
return $http.post('../typeTemplate/update.do',entity );
}
//删除
this.dele=function(ids){
return $http.get('../typeTemplate/delete.do?ids='+ids);
}
//搜索
this.search=function(page,rows,searchEntity){
return $http.post('../typeTemplate/search.do?page='+page+"&rows="+rows, searchEntity);
}
});
6.controller.java
@RestController
@RequestMapping("/typeTemplate")
public class TypeTemplateController {
@Reference
private TypeTemplateService typeTemplateService;
/**
* 返回全部列表
* @return
*/
@RequestMapping("/findAll")
public List<TbTypeTemplate> findAll(){
return typeTemplateService.findAll();
}
/**
* 返回全部列表
* @return
*/
@RequestMapping("/findPage")
public PageResult findPage(int page,int rows){
return typeTemplateService.findPage(page, rows);
}
/**
* 增加
* @param typeTemplate
* @return
*/
@RequestMapping("/add")
public Result add(@RequestBody TbTypeTemplate typeTemplate){
try {
typeTemplateService.add(typeTemplate);
return new Result(true, "增加成功");
} catch (Exception e) {
e.printStackTrace();
return new Result(false, "增加失败");
}
}
/**
* 修改
* @param typeTemplate
* @return
*/
@RequestMapping("/update")
public Result update(@RequestBody TbTypeTemplate typeTemplate){
try {
typeTemplateService.update(typeTemplate);
return new Result(true, "修改成功");
} catch (Exception e) {
e.printStackTrace();
return new Result(false, "修改失败");
}
}
/**
* 获取实体
* @param id
* @return
*/
@RequestMapping("/findOne")
public TbTypeTemplate findOne(Long id){
return typeTemplateService.findOne(id);
}
/**
* 批量删除
* @param ids
* @return
*/
@RequestMapping("/delete")
public Result delete(Long [] ids){
try {
typeTemplateService.delete(ids);
return new Result(true, "删除成功");
} catch (Exception e) {
e.printStackTrace();
return new Result(false, "删除失败");
}
}
/**
* 查询+分页
* @param brand
* @param page
* @param rows
* @return
*/
@RequestMapping("/search")
public PageResult search(@RequestBody TbTypeTemplate typeTemplate, int page, int rows ){
return typeTemplateService.findPage(typeTemplate, page, rows);
}
}
7.service.java
@Service
public class TypeTemplateServiceImpl implements TypeTemplateService {
@Autowired
private TbTypeTemplateMapper typeTemplateMapper;
/**
* 查询全部
*/
@Override
public List<TbTypeTemplate> findAll() {
return typeTemplateMapper.selectByExample(null);
}
/**
* 按分页查询
*/
@Override
public PageResult findPage(int pageNum, int pageSize) {
PageHelper.startPage(pageNum, pageSize);
Page<TbTypeTemplate> page= (Page<TbTypeTemplate>) typeTemplateMapper.selectByExample(null);
return new PageResult(page.getTotal(), page.getResult());
}
/**
* 增加
*/
@Override
public void add(TbTypeTemplate typeTemplate) {
typeTemplateMapper.insert(typeTemplate);
}
/**
* 修改
*/
@Override
public void update(TbTypeTemplate typeTemplate){
typeTemplateMapper.updateByPrimaryKey(typeTemplate);
}
/**
* 根据ID获取实体
* @param id
* @return
*/
@Override
public TbTypeTemplate findOne(Long id){
return typeTemplateMapper.selectByPrimaryKey(id);
}
/**
* 批量删除
*/
@Override
public void delete(Long[] ids) {
for(Long id:ids){
typeTemplateMapper.deleteByPrimaryKey(id);
}
}
@Override
public PageResult findPage(TbTypeTemplate typeTemplate, int pageNum, int pageSize) {
PageHelper.startPage(pageNum, pageSize);
TbTypeTemplateExample example=new TbTypeTemplateExample();
Criteria criteria = example.createCriteria();
if(typeTemplate!=null){
if(typeTemplate.getName()!=null && typeTemplate.getName().length()>0){
criteria.andNameLike("%"+typeTemplate.getName()+"%");
}
if(typeTemplate.getSpecIds()!=null && typeTemplate.getSpecIds().length()>0){
criteria.andSpecIdsLike("%"+typeTemplate.getSpecIds()+"%");
}
if(typeTemplate.getBrandIds()!=null && typeTemplate.getBrandIds().length()>0){
criteria.andBrandIdsLike("%"+typeTemplate.getBrandIds()+"%");
}
if(typeTemplate.getCustomAttributeItems()!=null && typeTemplate.getCustomAttributeItems().length()>0){
criteria.andCustomAttributeItemsLike("%"+typeTemplate.getCustomAttributeItems()+"%");
}
}
Page<TbTypeTemplate> page= (Page<TbTypeTemplate>)typeTemplateMapper.selectByExample(example);
return new PageResult(page.getTotal(), page.getResult());
}
}
8.interface
public interface TypeTemplateService {
/**
* 返回全部列表
* @return
*/
public List<TbTypeTemplate> findAll();
/**
* 返回分页列表
* @return
*/
public PageResult findPage(int pageNum,int pageSize);
/**
* 增加
*/
public void add(TbTypeTemplate typeTemplate);
/**
* 修改
*/
public void update(TbTypeTemplate typeTemplate);
/**
* 根据ID获取实体
* @param id
* @return
*/
public TbTypeTemplate findOne(Long id);
/**
* 批量删除
* @param ids
*/
public void delete(Long [] ids);
/**
* 分页
* @param pageNum 当前页 码
* @param pageSize 每页记录数
* @return
*/
public PageResult findPage(TbTypeTemplate typeTemplate, int pageNum,int pageSize);
}
9.daoMapper
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.pinyougou.mapper.TbTypeTemplateMapper" >
<resultMap id="BaseResultMap" type="com.pinyougou.pojo.TbTypeTemplate" >
<id column="id" property="id" jdbcType="BIGINT" />
<result column="name" property="name" jdbcType="VARCHAR" />
<result column="spec_ids" property="specIds" jdbcType="VARCHAR" />
<result column="brand_ids" property="brandIds" jdbcType="VARCHAR" />
<result column="custom_attribute_items" property="customAttributeItems" jdbcType="VARCHAR" />
</resultMap>
<sql id="Example_Where_Clause" >
<where >
<foreach collection="oredCriteria" item="criteria" separator="or" >
<if test="criteria.valid" >
<trim prefix="(" suffix=")" prefixOverrides="and" >
<foreach collection="criteria.criteria" item="criterion" >
<choose >
<when test="criterion.noValue" >
and ${criterion.condition}
</when>
<when test="criterion.singleValue" >
and ${criterion.condition} #{criterion.value}
</when>
<when test="criterion.betweenValue" >
and ${criterion.condition} #{criterion.value} and #{criterion.secondValue}
</when>
<when test="criterion.listValue" >
and ${criterion.condition}
<foreach collection="criterion.value" item="listItem" open="(" close=")" separator="," >
#{listItem}
</foreach>
</when>
</choose>
</foreach>
</trim>
</if>
</foreach>
</where>
</sql>
<sql id="Update_By_Example_Where_Clause" >
<where >
<foreach collection="example.oredCriteria" item="criteria" separator="or" >
<if test="criteria.valid" >
<trim prefix="(" suffix=")" prefixOverrides="and" >
<foreach collection="criteria.criteria" item="criterion" >
<choose >
<when test="criterion.noValue" >
and ${criterion.condition}
</when>
<when test="criterion.singleValue" >
and ${criterion.condition} #{criterion.value}
</when>
<when test="criterion.betweenValue" >
and ${criterion.condition} #{criterion.value} and #{criterion.secondValue}
</when>
<when test="criterion.listValue" >
and ${criterion.condition}
<foreach collection="criterion.value" item="listItem" open="(" close=")" separator="," >
#{listItem}
</foreach>
</when>
</choose>
</foreach>
</trim>
</if>
</foreach>
</where>
</sql>
<sql id="Base_Column_List" >
id, name, spec_ids, brand_ids, custom_attribute_items
</sql>
<select id="selectByExample" resultMap="BaseResultMap" parameterType="com.pinyougou.pojo.TbTypeTemplateExample" >
select
<if test="distinct" >
distinct
</if>
<include refid="Base_Column_List" />
from tb_type_template
<if test="_parameter != null" >
<include refid="Example_Where_Clause" />
</if>
<if test="orderByClause != null" >
order by ${orderByClause}
</if>
</select>
<select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Long" >
select
<include refid="Base_Column_List" />
from tb_type_template
where id = #{id,jdbcType=BIGINT}
</select>
<delete id="deleteByPrimaryKey" parameterType="java.lang.Long" >
delete from tb_type_template
where id = #{id,jdbcType=BIGINT}
</delete>
<delete id="deleteByExample" parameterType="com.pinyougou.pojo.TbTypeTemplateExample" >
delete from tb_type_template
<if test="_parameter != null" >
<include refid="Example_Where_Clause" />
</if>
</delete>
<insert id="insert" parameterType="com.pinyougou.pojo.TbTypeTemplate" >
insert into tb_type_template (id, name, spec_ids,
brand_ids, custom_attribute_items)
values (#{id,jdbcType=BIGINT}, #{name,jdbcType=VARCHAR}, #{specIds,jdbcType=VARCHAR},
#{brandIds,jdbcType=VARCHAR}, #{customAttributeItems,jdbcType=VARCHAR})
</insert>
<insert id="insertSelective" parameterType="com.pinyougou.pojo.TbTypeTemplate" >
insert into tb_type_template
<trim prefix="(" suffix=")" suffixOverrides="," >
<if test="id != null" >
id,
</if>
<if test="name != null" >
name,
</if>
<if test="specIds != null" >
spec_ids,
</if>
<if test="brandIds != null" >
brand_ids,
</if>
<if test="customAttributeItems != null" >
custom_attribute_items,
</if>
</trim>
<trim prefix="values (" suffix=")" suffixOverrides="," >
<if test="id != null" >
#{id,jdbcType=BIGINT},
</if>
<if test="name != null" >
#{name,jdbcType=VARCHAR},
</if>
<if test="specIds != null" >
#{specIds,jdbcType=VARCHAR},
</if>
<if test="brandIds != null" >
#{brandIds,jdbcType=VARCHAR},
</if>
<if test="customAttributeItems != null" >
#{customAttributeItems,jdbcType=VARCHAR},
</if>
</trim>
</insert>
<select id="countByExample" parameterType="com.pinyougou.pojo.TbTypeTemplateExample" resultType="java.lang.Integer" >
select count(*) from tb_type_template
<if test="_parameter != null" >
<include refid="Example_Where_Clause" />
</if>
</select>
<update id="updateByExampleSelective" parameterType="map" >
update tb_type_template
<set >
<if test="record.id != null" >
id = #{record.id,jdbcType=BIGINT},
</if>
<if test="record.name != null" >
name = #{record.name,jdbcType=VARCHAR},
</if>
<if test="record.specIds != null" >
spec_ids = #{record.specIds,jdbcType=VARCHAR},
</if>
<if test="record.brandIds != null" >
brand_ids = #{record.brandIds,jdbcType=VARCHAR},
</if>
<if test="record.customAttributeItems != null" >
custom_attribute_items = #{record.customAttributeItems,jdbcType=VARCHAR},
</if>
</set>
<if test="_parameter != null" >
<include refid="Update_By_Example_Where_Clause" />
</if>
</update>
<update id="updateByExample" parameterType="map" >
update tb_type_template
set id = #{record.id,jdbcType=BIGINT},
name = #{record.name,jdbcType=VARCHAR},
spec_ids = #{record.specIds,jdbcType=VARCHAR},
brand_ids = #{record.brandIds,jdbcType=VARCHAR},
custom_attribute_items = #{record.customAttributeItems,jdbcType=VARCHAR}
<if test="_parameter != null" >
<include refid="Update_By_Example_Where_Clause" />
</if>
</update>
<update id="updateByPrimaryKeySelective" parameterType="com.pinyougou.pojo.TbTypeTemplate" >
update tb_type_template
<set >
<if test="name != null" >
name = #{name,jdbcType=VARCHAR},
</if>
<if test="specIds != null" >
spec_ids = #{specIds,jdbcType=VARCHAR},
</if>
<if test="brandIds != null" >
brand_ids = #{brandIds,jdbcType=VARCHAR},
</if>
<if test="customAttributeItems != null" >
custom_attribute_items = #{customAttributeItems,jdbcType=VARCHAR},
</if>
</set>
where id = #{id,jdbcType=BIGINT}
</update>
<update id="updateByPrimaryKey" parameterType="com.pinyougou.pojo.TbTypeTemplate" >
update tb_type_template
set name = #{name,jdbcType=VARCHAR},
spec_ids = #{specIds,jdbcType=VARCHAR},
brand_ids = #{brandIds,jdbcType=VARCHAR},
custom_attribute_items = #{customAttributeItems,jdbcType=VARCHAR}
where id = #{id,jdbcType=BIGINT}
</update>
</mapper>