1. Mostrar página de inicio
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 = contenido" Content-Type "=" text / html; charset = UTF-8 ">
<title>淘淘商城后台管理系统</ title>
<link rel ="" type = "hoja de estilo 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 / temas / icon.css" />
<link rel = "stylesheet" type = "text / css "href =" css / taotao.css"/>
<Script type = "/ javascript texto" 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 ">
.Este contenido {
padding: 10px 10px 10px 10px;
}
</ Style>
</ head>
<body class = "easyui-diseño">
<div ficha Opciones = "región: 'oeste', título: '菜单', dividida: false" style = "width: 180px;" >
<ul id = clase "menú" = "easyui-árbol" style = "margin-top: 10px; margin-left: 5px;">
<li>
<span>商品管理</ span>
<
<li datos-options = "Atributos: { 'url': 'punto-param-list'}">规格参数</ li>
</ ul>
</ li>
<li>
<span>网站内容管理</ span >
<ul>
<li ficha opciones = "atributos: { 'url': 'contenido-categoría'}">内容分类管理</ li>
<li datos-options = "atributos: { 'url': 'contenido' } "内容管理</ li>>
<ul> /
</ li>
<ul> /
<div> /
<div ficha Opciones =" región: 'centro', título: '' ">
<div id =" pestañas "class =" easyui-pestañas ">
<div title = "首页" style = "padding: 20px;">
</ div>
</ div>
</ div>
<script type = "text / javascript">
$ (function () {
$ ( '# menú') del árbol ({.
onClick: function (nodo) {
. if ($ ( '# menú') del árbol ( "isLeaf", node.target)) {
pestañas var = $ ( "#" pestañas) ;
pestaña var = tabs.tabs ( "getTab", node.text);
si (pestaña) {
tabs.tabs ( "seleccionar", node.text);
} else {
tabs.tabs ( 'añadir', {
título: nodo .text,
href: node.attributes.url,
que se puede cerrar: true,
bodyCls: "contenido"
});
}
}
}
});
});
</ script>
</ body>
</ html>
2. pantalla de la página de consulta de las materias primas
elemento-List.jsp
<% @ Page language = "java" contentType = "text / html; charset = UTF-8" pageEncoding = "UTF-8" %>
<table class = "easyui-cuadrícula de datos" id = "elementoLista" title = "商品列表"
ficha opciones =" singleSelect: falsas, plegables: true, de paginación: true, url: '/ artículo / list', método: 'conseguir', PageSize: 30, la barra de herramientas: barra de Herramientas ">
<thead>
<tr>
<th datos-options = "campo: 'ck', casilla de verificación: true"> </ th>
<th de datos-options = "campo: 'id', anchura: 60">商品ID </ th>
<th de datos-options = "campo: 'título, anchura: 200">商品标题</ th>
<th de datos-options = "campo:' cid, anchura: 100">Hojas Categoría </ th>
<TH = Data-Opciones "Campo: 'sellPoint, anchura: 100"> venta </ th>
<th de datos-options = "campo: 'precio', ancho: 70, align: 'derecho', formateador: TAOTAO.formatPrice">价格</ th>
</ table>
<th de datos-options = "campo: 'num', ancho: 70, align: 'derecho'">库存数量</ th>
<th de datos-options = "campo: 'código de barras, anchura: 100">条形码< / th>
<th de datos-options = "campo: 'status', ancho: 60, align: 'centro', formateador: TAOTAO.formatItemStatus">状态</ th>
<th de datos-options = "campo: 'creado' , anchura: 130, align: 'centro', formateador: TAOTAO.formatDateTime ">创建日期</ th>
<th de datos-options =" de campo: 'actualizado, anchura: 130, align: 'centro', formateador: TAOTAO .formatDateTime ">更新日期</ th>
</ tr>
</ culata en T>
<div id =" itemEditWindow" class = "easyui-ventana"title = "编辑 商品" datos-options = "modal: verdadera, cerrado: true, iconCls: 'icono-Save', href: '/ descanso / página / artículo-editar'" style = "width: 80%; altura: 80%; padding: 10px; ">
</ div>
<script>
getSelectionsIds function () {
var elementoLista = $ ( "# elementoLista");
var sels = itemList.datagrid ( "GetSelections");
ids var = [];
para (i var en sels) {
ids.push (sels [i] .id);
}
Ids = ids.join ( "");
identificadores de retorno;
}
Barra de herramientas var = [{
texto: '新增',
iconCls: 'icono-add',
manejador: function () {
$ ( "árbol-título:. Contiene ( '新增商品')") padre ().. hacer clic();
}, {
Texto: '编辑',
iconCls: 'icono-edit',
manejador: function () {
identificadores de var = getSelectionsIds ();
$ .messager.alert ( 'pronta', 'Debe seleccionar un producto de edición!');
Return;
}
if (IDS .indexOf ( '')> 0) {
$ .messager.alert ( 'pronta', 'sólo puede elegir una mercancía ");!
retorno;
}
$ (" # itemEditWindow ") ventana ({.
el onLoad: function () {
// eco de datos
de datos var = $ ( "la elementoLista #") DataGrid ( "GetSelections") [0];.
data.priceView = TAOTAO.formatPrice (data.price);
. $ ( "# itemeEditForm") forma ( "carga", datos);
// Descripción del Producto de Carga
$ .getJSON ( '/ descanso / artículo / consulta / artículo / desc /' + data.id, la función (_data) {
IF (== 200 es _data.status) {
//UM.getEditor('itemeEditDescEditor').setContent(_data.data.itemDesc, false);
itemEditEditor.html (_data.data.itemDesc);
}
});
//加载商品规格
$ .getJSON ( '/ descanso / artículo / param / artículo / consulta /' + data.id, la función (_data) {
si (_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);
//回显商品规格
var paramData = JSON.parse (_data.data.paramData);
for (var i en paramData) {
var pd = paramData [i];
html + = "<li> <table>";
html + = "<tr> <td colspan = \" 2 \ "class = \ "grupo \"> "+ pd.group +"</ td> </ tr>";
for (var j en pd.params) {
ps var = pd.params [j];
html + = "<tr> <td class = \" PARAM \ "> <span>" + ps.k + "</ span>: </ td> <td> <input autocomplete = \" off \ "type = \" texto \ "value = ' "+ ps.v +"' /> </ td> </ tr>";
}
Html + = "<
});
TAOTAO.init ({
"fotos": data.image,
"CID": data.cid,
Diversión: función (nodo) {
TAOTAO.changeItemParam (Nodo "itemeEditForm");
}
;})
}
. ventana}) ( "Open");
}
}, {
texto: 'eliminar',
iconCls: 'icono-Cancelar',
Handler: function () {
getSelectionsIds var IDS = ();
SI (ids.length == 0) {
$ .messager.alert ( 'pronta', 'bienes sin control!');
retorno;
}
$ .messager.confirm ( 'OK', 'OK para borrar el ID como un' + + identificadores de 'mercancía que?'función (r) { función (r) {
si (r) {
params var = { "ids": IDS};
.post $ ( "/ REST / artículo / la eliminación", params, la función (los datos) {
SI (data.status == 200) {
$ .messager.alert ( 'pronta', 'elemento de borrado correctamente!', sin definir, la función () {
$ ( "# la elementoLista") DataGrid ( "recarga") ;.
});
}
});
}
});
}
}, '-', {
texto: 'fuera de la plataforma',
iconCls: 'icono Quitar '
Handler: function () {
getSelectionsIds var IDS = ();
SI (ids.length == 0) {
$ (.messager.alert' bienes pronta '' no seleccionados!);
return;
}
$.messager.confirm ( 'OK', 'determina el ID de rack es' + ids + 'hacen bienes?', function (r) {
regreso ;
}
si (ids.length == 0) {
$ .Messager.alert ( 'pronta', 'no está seleccionada mercancía!');
$ .Messager.confirm ( 'OK', 'estantes OK con el ID' + ids +, la función (r ) { ' bienes hacen?'
SI ( R & lt) {
var los params = { "IDS": IDS};
$ .post ( "/ REST / artículo / reshelf", los params, la función (Data) {
IF (== 200 es data.status) {
$ .messager.alert ( 'consejos', 'elemento de carga correctamente!', no definida, function () {
$ ( "# la elementoLista") DataGrid ( "recarga") ;.
});
}
});
}
});
}
}];
</ script >