`
stworthy
  • 浏览: 525737 次
  • 来自: ...
社区版块
存档分类
最新评论
文章列表
使用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 ...
Global site tag (gtag.js) - Google Analytics