1. Show Home page
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>淘淘商城后台管理系统</title>
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.1/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="css/taotao.css" />
<script type="text/javascript" src="js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<style type="text/css">
.content {
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body class="easyui-layout">
<div data-options="region:'west',title:'菜单',split:true" style="width:180px;">
<ul id="menu" class="easyui-tree" style="margin-top: 10px;margin-left: 5px;">
<li>
<span>商品管理</span>
<ul>
<li data-options="attributes:{'url':'item-add'}">新增商品</li>
<li data-options="attributes:{'url':'item-list'}">查询商品</li>
<li data-options="attributes:{'url':'item-param-list'}">规格参数</li>
</ul>
</li>
<li>
<span>网站内容管理</span>
<ul>
<li data-options="attributes:{'url':'content-category'}">内容分类管理</li>
<li data-options="attributes:{'url':'content'}">内容管理</li>
</ul>
</li>
</ul>
</div>
<div data-options="region:'center',title:''">
<div id="tabs" class="easyui-tabs">
<div title="首页" style="padding:20px;">
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$('#menu').tree({
onClick: function(node){
if($('#menu').tree("isLeaf",node.target)){
var tabs = $("#tabs");
var tab = tabs.tabs("getTab",node.text);
if(tab){
tabs.tabs("select",node.text);
}else{
tabs.tabs('add',{
title:node.text,
href: node.attributes.url,
closable:true,
bodyCls:"content"
});
}
}
}
});
});
</script>
</body>
</html>
2. display of commodities query page
item-list.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<table class="easyui-datagrid" id="itemList" title="商品列表"
data-options="singleSelect:false,collapsible:true,pagination:true,url:'/item/list',method:'get',pageSize:30,toolbar:toolbar">
<thead>
<tr>
<th data-options="field:'ck',checkbox:true"></th>
<th data-options="field:'id',width:60">商品ID</th>
<th data-options="field:'title',width:200">商品标题</th>
<th data-options="field:'cid',width:100">Leaves Category </ th>
<TH = Data-Options "Field: 'sellPoint', width: 100"> selling </ th>
<TH = Data-Options "Field: '. Price', width: 70, align = left: 'right', Formatter: TAOTAO.formatPrice"> Price </ th>
<th data-options="field:'num',width:70,align:'right'">库存数量</th>
<th data-options="field:'barcode',width:100">条形码</th>
<th data-options="field:'status',width:60,align:'center',formatter:TAOTAO.formatItemStatus">状态</th>
<th data-options="field:'created',width:130,align:'center',formatter:TAOTAO.formatDateTime">创建日期</th>
<th data-options="field:'updated',width:130,align:'center',formatter:TAOTAO.formatDateTime">Updated </ TH>
</ Table>
</ thead>
</ TR>
<div id="itemEditWindow" class="easyui-window" title="编辑商品" data-options="modal:true,closed:true,iconCls:'icon-save',href:'/rest/page/item-edit'" style="width:80%;height:80%;padding:10px;">
</div>
<script>
function getSelectionsIds(){
var itemList = $("#itemList");
var sels = itemList.datagrid("getSelections");
var ids = [];
for(var i in sels){
ids.push(sels[i].id);
}
ids = ids.join(",");
return ids;
}
var toolbar = [{
text:'新增',
iconCls:'icon-add',
handler:function () {
}
$ (. "Tree-title: the contains ( 'new product')") parent () the Click ();..
}, {
Text: 'edit',
iconCls: 'icon-Edit',
Handler: function () {
// Load Product Description
var ids = getSelectionsIds();
if(ids.length == 0){
$ .messager.alert ( 'prompt', 'must be selected in order to edit a commodity! ");
return;
}
IF (ids.indexOf (', ')> 0) {
$ .messager.alert (' prompt ',' only can select a commodity ');!
return;
}
$ ( "# itemEditWindow") window ({.
the onLoad: function () {
// echo data
var data = $ ( "# itemList ") datagrid ( "getSelections"). [0];
data.priceView = TAOTAO.formatPrice (data.price);
$ ( "# itemeEditForm") form ( "Load", Data);.
IF (== 200 is _data.status) {
$.getJSON('/rest/item/query/item/desc/'+data.id,function(_data){
//UM.getEditor('itemeEditDescEditor').setContent(_data.data.itemDesc, false);
itemEditEditor.html(_data.data.itemDesc);
}
});
//加载商品规格
$.getJSON('/rest/item/param/item/query/'+data.id,function(_data){
if(_data && _data.status == 200 && _data.data && _data.data.paramData){
$("#itemeEditForm .params").show();
$("#itemeEditForm [name=itemParams]").val(_data.data.paramData);
$("#itemeEditForm [name=itemParamId]").val(_data.data.id);
// Echo Product Specifications
var paramData = JSON.parse(_data.data.paramData);
var html = "<ul>";
for(var i in paramData){
var pd = paramData[i];
html+="<li><table>";
html+="<tr><td colspan=\"2\" class=\"group\">"+pd.group+"</td></tr>";
for(var j in pd.params){
var ps = pd.params[j];
html+="<tr><td class=\"param\"><span>"+ps.k+"</span>: </td><td><input autocomplete=\"off\" type=\"text\" value='"+ps.v+"'/></td></tr>";
}
html+="</li></table>";
}
html+= "</ul>";
$("#itemeEditForm .params td").eq(1).html(html);
}
});function(r){
if (r){
TAOTAO.init({
"pics": data.image,
"CID": data.cid,
Fun: function (Node) {
TAOTAO.changeItemParam (Node, "itemeEditForm");
}
});
}
.}) window ( "Open");
}
}, {
text: 'delete',
iconCls: 'icon-Cancel',
Handler: function () {
var getSelectionsIds IDS = ();
IF (ids.length == 0) {
$ .messager.alert ( 'prompt', 'unchecked goods!');
return;
}
$ .messager.confirm ( 'OK', 'OK to delete the ID as a' + ids + 'merchandise it?'
the params = {var "IDS": IDS};
}
.post $ ( "/ REST / Item / the Delete", params, function (the Data) {
IF (data.status == 200) {
$ .messager.alert ( 'prompt', 'delete item successfully!', undefined, function () {
$ ( "# the itemList") DataGrid ( "reload");.
});
}
});
}
});
}
}, '-', {
text: 'off the shelf',
iconCls: 'icon-Remove ',
Handler: function () {
var getSelectionsIds IDS = ();
IF (ids.length == 0) {
$ .messager.alert (' prompt ',' not selected goods'!);
return;
$.messager.confirm ( 'OK', 'determines the rack ID is' + ids + 'goods do?', function (r) {
IF (R & lt) {
var the params = { "IDS": IDS};
$ .post ( "/ REST / Item / inStock", the params, function (Data) {
IF (== 200 is data.status) {
$ .messager.alert ( 'prompt', 'shelf products success!', undefined, function () {
$ ( "# the itemList") DataGrid ( "reload");.
});
}
});
}
});
}
}, {
text: 'Added',
iconCls: 'icon-Remove',
Handler:function(){
var ids = getSelectionsIds();
if(ids.length == 0){
$ .messager.alert ( 'prompt', 'is not selected merchandise!');
return ;
}
$ .messager.confirm ( 'OK', 'OK shelves with ID' + ids +, function (r ) { ' goods do?'
IF ( R & lt) {
var the params = { "IDS": IDS};
$ .post ( "/ REST / Item / reshelf", the params, function (Data) {
IF (== 200 is data.status) {
$ .messager.alert ( 'tips', 'upload item successfully!', undefined, function () {
$ ( "# the itemList") DataGrid ( "reload");.
});
}
});
}
});
}
}];
</ Script >