精灵商场项目(三)--商品分类列表+商品CRUD

最新推荐文章于 2023-04-05 10:17:05 发布

冷潇丶

最新推荐文章于 2023-04-05 10:17:05 发布

阅读量443

点赞数 1

分类专栏：分布式电商项目文章标签：电商项目

本文链接：https://blog.csdn.net/qq_42495388/article/details/102844608

版权

文章目录

一、EasyUI中弹出框
二、商品分类列表展现
三、EasyUI 数据校验
四、商品新增
五、商品更新
六、商品上架/下架
七、商品的删除

今天主要是做精灵项目后台的维护功能

一、EasyUI中弹出框

页面的主要展现弹出框

自定义弹出窗口

定义退出消息框

<script type="text/javascript">
	$(function(){
   
		
		$("#btn1").bind("click",function(){
   
			
			$("#win1").window({
   
				title:"弹出框",
				width:400,
				height:400,
				modal:true   //这是一个模式窗口，只能点击弹出框，不允许点击别处
			})
		})
		
		$("#btn3").click(function(){
   
			alert("关闭");
			$("#win2").window("close");
		});
		
		/*定义退出消息框  */
		$("#btn4").click(function(){
   
			$.messager.confirm('退出','你确定要退出吗',function(r){
    
					if (r){
    
						alert("确认退出");
					} 
				});
		})
		
		/*定义消息提示框  */
		$.messager.show({
     	
			  title:'My Title',  	
			  msg:'龚玲博你都胖成一个球了，圆的',  	
			  timeout:3000,
			  height:200,
			  width:300,
			  showType:'slide'  
			}); 
	})
</script>
</head>
<body>
	<h1>Easy-弹出窗口</h1>
	
	<!--主要展现弹出框  -->
	<a id="btn1" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-filter'">搜索</a>
	<div id="win1"></div>
	
	<!--定义弹出窗口  -->
	<div id="win2" class="easyui-window" title="My Window" style="width:600px;height:400px" data-options="iconCls:'icon-save',modal:true"> 
		我是一个窗口
		<a id="btn3" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-back'">关闭</a>
	</div>
	<div style="float: right">
		<a id="btn4" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">退出系统</a>
	</div>
</body>

二、商品分类列表展现

1.1 商品分类列表展现

1.1.1 页面分析

页面分析

"javascript:void(0)" 空方法 , 相当于占位符的作用

js显示分类列表

<a href="javascript:void(0)" class="easyui-linkbutton selectItemCat">选择类目</a>

$(".selectItemCat").each(function(i,e){
   //i= index 下标，e：element：元素
    		var _ele = $(e);
    		if(data && data.cid){
   
    			_ele.after("<span style='margin-left:10px;'>"+data.cid+"</span>");
    		}else{
   
    			_ele.after("<span style='margin-left:10px;'></span>");
    		}
    		_ele.unbind('click').click(function(){
   
    			$("<div>").css({
   padding:"5px"}).html("<ul>")
    			.window({
   
    				width:'500',
    			    height:"450",
    			    modal:true,
    			    closed:true,
    			    iconCls:'icon-save',
    			    title:'选择类目',
    			    onOpen : function(){
   ......}

1.2 EasyUI中的Tree

通过js创建树形结构

Tree结构的JSON串格式 : [{id:"编号",text:"文本信息",state:"open/closed"},{....}]

<script type="text/javascript">
	/*通过js创建树形结构 */
	$(function(){
   
		$(

最低0.47元/天解锁文章

冷潇丶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
精灵商场项目(三)--商品分类列表+商品CRUD

今天主要是做精灵项目后台的维护功能一、EasyUI中弹出框页面的主要展现弹出框自定义弹出窗口定义退出消息框<script type="text/javascript"> $(function(){ $("#btn1").bind("click",function(){ $("#win1").window({ title:"弹出框",...
复制链接

扫一扫