- 浏览: 526075 次
- 来自: ...
最新评论
-
alick24:
不能下载呢
基于easyui的仓库管理系统 -
eddie_lau:
...
基于easyui的仓库管理系统 -
zxygww:
非常强大的项目,可以直接运行
基于easyui的仓库管理系统 -
big3333:
表格是合并了,但是序号没有合并,有没有办法处理序号合并,翻页b ...
在datagrid的表格体中合并单元格 -
nacco:
有没有一个默认的Controller?用www.xxx.com ...
利用etmvc再来写个小例子
文章列表
使用jQuery EasyUI创建的仓库管理系统包括系统管理、数据维护、业务单据管理等,有兴趣可以对其进行修改扩展。
数据库采用MYSQL, 帐号/密码:root/root,演示登录帐号/密码:admin/admin。
数据库配置信息可以修改配置文件:/WEB-INF/classes/activerecord.properties
各文件内容如下:
wms_data.rar: 演示数据
wms.rar: 系统全部源码
wmw.war: 可执行war包
基本的操作界面如下:
1、商品资料管理
2、修改往来单位
3、采购入库单
4、新增 ...
在easyui中,DataGrid可以通过detailview实现行的展开和收缩,利用这个特性可以实现基本的CRUD操作。
展开行时,动态加载表单并装载数据,保存或取消表单操作时再收缩行。
首先建立表格基本框架:
<table id="dg" title="My Users" style="width:550px;height:250px" url="get_users.php" toolbar="#toolbar" fitcolumns="true" ...
easyui中的DataGrid可以切换不同的视图,当使用detailview时,可以让用户展开行以显示该行的详细信息。行的明细信息可以通过AJAX的方式进行加载。
使用detailview时,首先建立表格基本框架:
<table id="dg" style="width:500px;height:250px" url="data/datagrid_data.json" title="DataGrid - Expand Row" singleselect="true" f ...
属性编辑器propertygrid支持分组显示,创建的时候可以直接在<table>中定义,不用写JS代码。如下所示:
<table class="easyui-propertygrid" style="width:300px"
url="propertygrid_data.json"
showGroup="true" scrollbarSize="0"
></table>
可以看到,创建p ...
采用EasyUI可以方便制作入库单的操作界面,先看看图:
1、入库单
往来单位采用combogrid下拉表格实现,设置mode为remote以支持可以直接在文本框中进行搜索选择供应商。
商品的操作可以通过右键菜单完成,可以添加商品、删除商品、对选中项进行上移和下移操作。
2、修改商品数量界面:
采用行编辑实现对数量和单价的修改,通过numberbox控件限制只能输入数字,在操作上可以通过回车完成编辑操作,也可以通过上下移动键盘导航键对数据进行连续编辑操作。
3、选择商品界面:
选择商品时通过查询后多项的datagrid实现。
主要的实现方法是通过对d ...
datagrid中可以使用合计行显示汇总信息,合计行可以是多行,如下图所示:
合计行的数据由datagrid的数据源提供,如下所示:
{"total":1,"rows":[{"id":1,"name":"Chai","price":18.00}],"footer":[{"name":"Total","price":18.00}]}
要使用合计行必须设置showFooter为true,代 ...
在DataGrid中自定义视图可以帮助我们做各种个性化的显示方式,下面以建立一个CardView的视图为例说明定义一个视图的方法,看一下效果图:
1.通过扩展$.fn.datagrid.defaults.view定义一个视图:
var cardview = $.extend({}, $.fn.datagrid.defaults.view, {
renderRow: function(target, fields, frozen, rowIndex, rowData){
var cc = [];
cc.push('<td colsp ...
jquery-easyui中的TreeGrid继承DataGrid的很多特性,比如复杂表头,冻结列等,利用这些特性可以制作一般的数据报表。
创建方法基本同datagrid,所不同的是需要定义treeField属性以指定那个字段可以收缩和展开:
$('#test').treegrid({
title:'Complex TreeGrid',
width:550,
height:300,
rownumbers: true,
animate:true,
url:'treegrid_data.json',
idFie ...
下拉框的列表项一般为一行文本,但实际上可以是任何HTML,所以可以轻易地定义列表项的格式,做为例子,我们来显示带图标的列表项,效果图如下:
利用formatter函数可以做到这一点,代码如下:
$('#cc').combobox({
url:'combobox_data.json',
valueField:'id',
textField:'text',
formatter:function(row){
return '<img class="item-img" src="'+row.icon+' ...
jquery-easyui的datagrid具有创建复杂表头和合并表格体单元格的能力,下面介绍如何合并单元格。合并后的效果图如下:
合并单元格主要通过调用mergeCells方法实现,先看创建未合并单元格时的表格代码:
$('#tt').datagrid({
title:'Merge Cells',
iconCls:'icon-ok',
width:600,
height:300,
singleSelect:true,
rownumbers:true,
idField:'itemid',
url: ...
datagrid现在具有行编辑能力了,使用时只须在columns中为需要编辑的列添加一个editor属性,编辑保存时同时具有数据校验能力。
看一个例子效果图:
代码如下:
$('#tt').datagrid({
title:'Editable DataGrid',
iconCls:'icon-edit',
width:660,
height:250,
singleSelect:true,
idField:'itemid',
url:'datagrid_data.json',
columns:[[
...
利用jQuery EasyUI可以很容易就实现学校课程表的拖放设计,看一下效果图:
如何将左边的课程拖到右边的单元格上,利用draggable,droppable二个插件就可以做到。
看一下课程表的HTML结构:
<div class="left">
<table>
<tr>
<td><div class="item">English</div></td>
</tr>
...
easyui可以创建带复选框的树,只要带上选项checkbox:true就行了,看一下效果图:
首先建立<ul>标记
<ul id="tt"></ul>
接着,动态加载树插件,然后创建树:
using('tree', function(){
$('#tt').tree({
url:'tree_data.json',
checkbox:true
});
});
原文及下载地址:http://jquery-easyui.wikidot.com/tutorial:tr ...
利用easyui的拖放能力可以轻松创建购物车,看一个例子:
1、显示产品HTML
<ul class="products">
<li>
<a href="#" class="item">
<img src="shirt1.gif"/>
<div>
<p>Balloon</p>
...
jQuery EasyUI中进行表单验证主要是通过validatebox插件,看一个例子:
<div style="background:#fafafa;padding:10px;width:300px;height:300px;">
<form id="ff" method="post">
<div>
<label for="name">Name:</label>
<i ...