- 浏览: 522501 次
- 来自: ...
最新评论
-
alick24:
不能下载呢
基于easyui的仓库管理系统 -
eddie_lau:
...
基于easyui的仓库管理系统 -
zxygww:
非常强大的项目,可以直接运行
基于easyui的仓库管理系统 -
big3333:
表格是合并了,但是序号没有合并,有没有办法处理序号合并,翻页b ...
在datagrid的表格体中合并单元格 -
nacco:
有没有一个默认的Controller?用www.xxx.com ...
利用etmvc再来写个小例子
datagrid现在具有行编辑能力了,使用时只须在columns中为需要编辑的列添加一个editor属性,编辑保存时同时具有数据校验能力。
看一个例子效果图:
代码如下:
$('#tt').datagrid({ title:'Editable DataGrid', iconCls:'icon-edit', width:660, height:250, singleSelect:true, idField:'itemid', url:'datagrid_data.json', columns:[[ {field:'itemid',title:'Item ID',width:60}, {field:'productid',title:'Product',width:100, formatter:function(value){ for(var i=0; i<products.length; i++){ if (products[i].productid == value) return products[i].name; } return value; }, editor:{ type:'combobox', options:{ valueField:'productid', textField:'name', data:products, required:true } } }, {field:'listprice',title:'List Price',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}}, {field:'unitcost',title:'Unit Cost',width:80,align:'right',editor:'numberbox'}, {field:'attr1',title:'Attribute',width:150,editor:'text'}, {field:'status',title:'Status',width:50,align:'center', editor:{ type:'checkbox', options:{ on: 'P', off: '' } } }, {field:'action',title:'Action',width:70,align:'center', formatter:function(value,row,index){ if (row.editing){ var s = '<a href="#" onclick="saverow('+index+')">Save</a> '; var c = '<a href="#" onclick="cancelrow('+index+')">Cancel</a>'; return s+c; } else { var e = '<a href="#" onclick="editrow('+index+')">Edit</a> '; var d = '<a href="#" onclick="deleterow('+index+')">Delete</a>'; return e+d; } } } ]], onBeforeEdit:function(index,row){ row.editing = true; $('#tt').datagrid('refreshRow', index); }, onAfterEdit:function(index,row){ row.editing = false; $('#tt').datagrid('refreshRow', index); }, onCancelEdit:function(index,row){ row.editing = false; $('#tt').datagrid('refreshRow', index); } });
原文及下载地址:http://jquery-easyui.wikidot.com/tutorial:datagrid12
评论
41 楼
renpeng301
2013-05-10
这没更新数据库啊?
40 楼
wybztn
2013-03-20
比如一行我编辑单价和数量咧,要求总计列数据跟着变化,但是单价和数量列是edit,总计不是,怎么给单价和数量列加入change事件啊
39 楼
tuo_bing
2011-04-21
请问我可以实现 当前编辑的一行中, editor:'text' , 但是此输入框不能输入,因为它的值 是 其他 两个 Text 计算出来的结果值 ,如果我不用 editor:‘text’ , 那么当我新添加一行的时候,计算出来的结果值根本就保存不了, 请问有解决方案么 ? 谢谢 ~~
38 楼
kkmaster
2011-02-23
//设置主工作完成状态编辑器
var options = dgm.datagrid('options');
options.columns[0][2].editor = {
type:'combobox',
options:{
valueField:'val',
textField:'desc',
panelWidth:100,
panelHeight: 'auto',
editable:false,
data:status,
onSelect:function(record){
var sd = $('#_date').val();
if(record.val == 3){
dlgMnd.dialog({
left: $(this).parent().offset().left,
top: $(this).parent().offset().top - 100
});
dlgMnd.dialog('open');
}
}
}
};
//格式化函数
options.columns[0][2].formatter = function(value, record ){
for(var i=0; i<status.length; i++){
if(status[i].val == value) return status[i].desc;
}
return value;
};
//编辑器
options.columns[0][3].editor = "textarea";
var options = dgm.datagrid('options');
options.columns[0][2].editor = {
type:'combobox',
options:{
valueField:'val',
textField:'desc',
panelWidth:100,
panelHeight: 'auto',
editable:false,
data:status,
onSelect:function(record){
var sd = $('#_date').val();
if(record.val == 3){
dlgMnd.dialog({
left: $(this).parent().offset().left,
top: $(this).parent().offset().top - 100
});
dlgMnd.dialog('open');
}
}
}
};
//格式化函数
options.columns[0][2].formatter = function(value, record ){
for(var i=0; i<status.length; i++){
if(status[i].val == value) return status[i].desc;
}
return value;
};
//编辑器
options.columns[0][3].editor = "textarea";
37 楼
JesseyHu
2010-11-26
大哥,你们把demo给贴出来了。还没个注释说明。没意思!
36 楼
stworthy
2010-10-12
<p>解决思路:在进入行编辑状态后,获取combobox的编辑器并添加onChange事件,示例代码如下:</p>
<pre name="code" class="js">var amount = $('#tt').datagrid('getEditor', {index:editLineIndex,field:'amount'}).target; // 个数
var sum = $('#tt').datagrid('getEditor', {index:editLineIndex,field:'sum'}).target; // 总数
amount.combobox({
onChange:function(id){
sum.val(id*100); // 假设是text编辑类型
}
});</pre>
<pre name="code" class="js">var amount = $('#tt').datagrid('getEditor', {index:editLineIndex,field:'amount'}).target; // 个数
var sum = $('#tt').datagrid('getEditor', {index:editLineIndex,field:'sum'}).target; // 总数
amount.combobox({
onChange:function(id){
sum.val(id*100); // 假设是text编辑类型
}
});</pre>
35 楼
xilin
2010-10-12
如何设置datagrid某行的值呢?我作一个报价的datagrid,有总价和个数的列,个数是一个combobox固定的几个选项,如果个数改变时,则位于同一行的总价需要自动作变更(根据单价,单价是固定的),现在的编辑方法,我改变了个数,总价还是要手动去更改值,有没办法在这个combobox的onchange中加入某个事件,让总价的那个格子的数值变成我想要的值,而不是手动输入
34 楼
hhww0101
2010-09-28
有一点我不明白,我把data换成url了。从后台获取json,那个for循环里没有products了,应该怎么写呢?
33 楼
Jaysonj
2010-08-04
stworthy 写道
需要检查你在appendRow时有没有把guid字段添加进出,如:
.datagrid('appendRow', {
guid:...
});
.datagrid('appendRow', {
guid:...
});
已经可以了!谢谢您!
32 楼
matychen
2010-08-04
作者能不能提供没有混淆变量的下载版本,混淆后的,根本不能阅读。
31 楼
stworthy
2010-08-04
需要检查你在appendRow时有没有把guid字段添加进出,如:
.datagrid('appendRow', {
guid:...
});
.datagrid('appendRow', {
guid:...
});
30 楼
Jaysonj
2010-08-04
<div class="quote_title">stworthy 写道</div>
<div class="quote_div">
<p>假设你的记录中有id字段,在columns中不需要定义,但可以这样取出来:</p>
<pre name="code" class="js">var row = $('#tt').datagrid('getSelected');
alert(row.id);</pre>
</div>
<p> var value = $('#qcip').datagrid('getSelected');//其中datagrid中保存了后台返回的数据,有s1l,guid等。</p>
<p> 我在columns中只定义了s1l,但没定义guid。</p>
<p> alert(value.s1l);显示为空<br> alert(value.guid);显示为undefined</p>
<p> </p>
<p>我用FireDebug看到,在datagrid中是没guid这内容的。</p>
<p> </p>
<p>所以在取datagrid('getSelected')时候没guid的值。我用的是最新的easyui-1.1.2的。</p>
<p> </p>
<p>请指教!</p>
<p> </p>
<p>注:我记录是appendRow 加入datagird的。</p>
<p> </p>
<div class="quote_div">
<p>假设你的记录中有id字段,在columns中不需要定义,但可以这样取出来:</p>
<pre name="code" class="js">var row = $('#tt').datagrid('getSelected');
alert(row.id);</pre>
</div>
<p> var value = $('#qcip').datagrid('getSelected');//其中datagrid中保存了后台返回的数据,有s1l,guid等。</p>
<p> 我在columns中只定义了s1l,但没定义guid。</p>
<p> alert(value.s1l);显示为空<br> alert(value.guid);显示为undefined</p>
<p> </p>
<p>我用FireDebug看到,在datagrid中是没guid这内容的。</p>
<p> </p>
<p>所以在取datagrid('getSelected')时候没guid的值。我用的是最新的easyui-1.1.2的。</p>
<p> </p>
<p>请指教!</p>
<p> </p>
<p>注:我记录是appendRow 加入datagird的。</p>
<p> </p>
29 楼
matychen
2010-08-04
想问下这个收费吗?是什么协议?
28 楼
stworthy
2010-08-04
<p>假设你的记录中有id字段,在columns中不需要定义,但可以这样取出来:</p>
<pre name="code" class="js">var row = $('#tt').datagrid('getSelected');
alert(row.id);</pre>
<pre name="code" class="js">var row = $('#tt').datagrid('getSelected');
alert(row.id);</pre>
27 楼
Jaysonj
2010-08-03
stworthy 写道
在columns中不定义出来就不显示,但其数据一直可用。
能否指教一下?我不在columns定义,用js想取出未定义的列就会提示undefine了!
26 楼
stworthy
2010-07-12
简单的editor可以在TH中定义,例如:'text','textarea'。需要options的就不能了,需要在JS中定义。
25 楼
kkmaster
2010-07-10
请问转换现有html table 中的thead>th 属性editor如何使用?
是否只允话写控件类型名,options如何传递呢?
谢谢!
是否只允话写控件类型名,options如何传递呢?
谢谢!
24 楼
joyfun
2010-07-08
测试 使用在select 标签里面直接写url的方式 少请求了一次
<select id="ptype" url="/system/paramdata.do?paramEN=sitetype" class="easyui-combobox" name="sysParamModel.type" style="width:120px;" required="true"> </select>
23 楼
joyfun
2010-07-05
测试发现 效果一样 都是请求了3次
22 楼
stworthy
2010-07-05
<p>你使用jQuery对象的方法有误,所以创建jQuery对象的代码必须ready后才能调用:</p>
<pre name="code" class="js">$(function(){
$('#ptype').combobox({
url:'/system/paramdata.do?paramEN=sitetype',
listWidth:120,
editable:false,
valueField:'id',
textField:'text'
});
});
</pre>
<pre name="code" class="js">$(function(){
$('#ptype').combobox({
url:'/system/paramdata.do?paramEN=sitetype',
listWidth:120,
editable:false,
valueField:'id',
textField:'text'
});
});
</pre>
发表评论
-
在easyui中利用DataGrid的行明细区域实现CRUD操作
2011-06-20 17:42 13545在easyui中,DataGrid可以通过detailview ... -
在easyui中展开DataGrid的行,显示明细数据
2011-06-20 17:24 40497easyui中的DataGrid可以切换不同的视图,当使用de ... -
在EasyUI中创建分组属性编辑器
2011-05-05 11:53 9321属性编辑器propertygrid支持分组显示,创建的时候可以 ... -
采用EasyUI制作入库单操作界面
2011-04-12 11:51 15096采用EasyUI可以方便制作入库单的操作界面,先看看图: 1 ... -
datagrid中使用合计行
2010-12-23 16:28 8780datagrid中可以使用合计行显示汇总信息,合计行可以是多行 ... -
jquery-easyui中自定义DataGrid的视图
2010-10-21 14:25 19929在DataGrid中自定义视图可以帮助我们做各种个性化的显示方 ... -
利用TreeGrid做简单数据报表
2010-09-02 10:46 6184jquery-easyui中的TreeGrid继承DataGr ... -
jquery-easyui中自定义下拉框列表项格式
2010-08-24 15:27 10327下拉框的列表项一般为一行文本,但实际上可以是任何HTML,所以 ... -
在datagrid的表格体中合并单元格
2010-07-08 11:22 5526jquery-easyui的datagrid具有创建复杂表头和 ... -
jquery-easyui中实现课程表拖放效果
2010-05-28 09:17 7594利用jQuery EasyUI可以很容易就实现学校课程表的拖放 ... -
jquery-easyui中创建带复选框的树
2010-05-24 18:24 8171easyui可以创建带复选框的树,只要带上选项checkbox ... -
jquery-easyui的拖放购物车范例
2010-05-24 11:58 6325利用easyui的拖放能力可以轻松创建购物车,看一个例子: ... -
jquery-easyui中的表单验证
2010-03-22 17:55 10014jQuery EasyUI中进行表单验证主要是通过valida ... -
jquery-easyui中添加树节点
2010-03-08 12:17 4966jquery-easyui中的树具备基本的CRUD能力,添加节 ... -
jquery-easyui中创建复杂的布局效果
2010-02-24 17:42 11288jquery-easyui中利用panel, layout等插 ... -
基于jquery-easyui的机电设备管理系统布局新范例
2010-02-05 14:53 10865使用jquery-easyui的新版本 ... -
jquery-easyui中为datagrid加入分页功能
2010-02-01 16:44 19825jquery-easyui中使用datagrid来加载远程数据 ... -
jquery-easyui中轻松转换html table
2010-01-31 11:02 6065jquery-easyui中将html table转换成dat ... -
jquery-easyui中创建Window窗口
2010-01-30 11:07 32140jquery-easyui中创建窗口很简单,建立一个DIV就行 ... -
jquery-easyui中创建SplitButton
2010-01-29 11:11 3038easyui中的splitbutton由linkbutton和 ...
相关推荐
jquery easyui的压缩包,以及easyui的一些拓展插件包,包括Portal(制作图表、列表、球形图等),数据网格视图(DataGrid View),可编辑的数据网格(Editable DataGrid),表格编辑单元格(Cell Editing in ...
对表格进行增删改后一次性保存或回滚的发生相当有用。参照官方的教程例子做了个用户管理的小例子。
数据表格添加查询功能 数据表格添加工具条 数据表格设置冻结列 动态改变数据表格列 格式化数据表格列 数据表格设置排序 数据表格自定义排序 数据表格添加复选框 数据表格自定分页工具栏 数据表格...
这是 jquery easyui Extension 实现表格 双击编辑功能 所以来的js文件
两种方法将easyui datagrid 中的数据导出到Excel中,均以验证可以正常使用
最近在用jquery做页面,当datagrid放置数字文本框时输入小数会自动四舍五入,然后加了小数位数限制时不能输入小数点了。 最后发现是easyui1.4的bug,把这个补丁引入进去就好了
o 6.3 得到DataGrid选择行 27 o 6.4 添加工具栏到DataGrid 28 o 6.5 DataGrid冻结列 30 o 6.6 动态改变DataGrid列 31 o 6.7 格式化DataGrid列 32 o 6.8 添加排序到DataGrid 33 o 6.9 在DataGrid上的复选框 36 ...
开发工具为VS2010,MVC4(razor视图引擎),数据访问为EntityFramework4.4,UI插件为jquery-easyui-1.3.0,编辑器为kindeditor,上传文件为uploadify,表格插件Flexigrid,相册插件为lightbox 3.工程分为:CommWeb,...
本篇文章主要介绍jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】 。datagrid现在具有行编辑能力了,可以添加和编辑数据,同时对行内数据上移下移。
jquery easy ui edatagrid 动态编辑表格 下拉框 联动 ,支持增加,编辑,删除行,日期狂,下拉框联动显示数据,测试ok
o 6.3 得到DataGrid选择行 27 o 6.4 添加工具栏到DataGrid 28 o 6.5 DataGrid冻结列 30 o 6.6 动态改变DataGrid列 31 o 6.7 格式化DataGrid列 32 o 6.8 添加排序到DataGrid 33 o 6.9 在DataGrid上的复选框 36 o 6.10...
扩展自 $.fn.datagrid.defaults,用 $.fn.treegrid.defaults 重写了 defaults。 依赖 datagrid 用法 代码如下: ”tt”></table> 代码如下: $(‘#tt’).treegrid({ url:’treegrid_data.json’, treeField:’name’, ...
扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults 。 依赖 panel resizable linkbutton pagination 用法 代码如下: ”tt”></table> 代码如下: $(‘#tt’).datagrid({ url:’datagrid_data....
extgrid具有列大小 位置改变 排序 分组 分页 工具栏 扩展行 rowNumber 多选列 编辑列 行列锁 ajax远程支持 table转换 等功能">http: www extgrid com extgrid 是一款jquery上的gird插件 界面风格采用了类似easyui ...
最近在学习easyUI 但是发现每次做一个表格都要去写一个json数据,太麻烦了,我想要用一种方式可以简单生成就行。于是,我花了几个小时时间开始写了这段段代码: 功能:自动生成Json数据; 详细说明:页面会显示一...
这是一套技术比较全面的EasyUI视频,由浅入深的几乎涵盖了所有EasyUI常用的组件,本课程后台Java端采用...熟练掌握可编辑表格Combo组件详解8.熟练掌握combo组件详解,省市县级联菜单9.熟练掌握tree组件详解,拖拽,增删改查
easyui可编辑表格插件、想使用easyui的可编辑表格就要导入这个js
信息系统: 在企业、机构或组织中,信息系统是指由硬件、软件、人员、数据资源、通信网络等组成的,用于收集、处理、存储、分发和管理信息,以支持决策制定、业务运营和战略规划的系统。这类系统包括: 数据库管理...
jQuery EasyUI | 基于jQuery的UI插件集合体 | [http://www.jeasyui.com](http://www.jeasyui.com) React | 界面构建框架 | [https://github.com/facebook/react](https://github.com/facebook/react) Editor.md | ...