stworthy
- 浏览: 522322 次
- 来自: ...
-
最新评论
-
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 ...