87,955
社区成员
发帖
与我相关
我的任务
分享easyui里datagrid的单元格能弄成输入框吗
我知道edit属性可以让datagrid点击某单元格后变成可编辑
但我想做成不点击也直接显示的是输入框
就是像下面这种，存储数量里直接就是输入框
别人会知道只有那里是可以编辑的
但我想做成不点击也直接显示的是输入框
就是像下面这种，存储数量里直接就是输入框
别人会知道只有那里是可以编辑的
...全文
请发表友善的回复…
发表回复
kingkillua 2015-08-04
- 打赏
- 举报
用fomattter类似链接一样生成input
然后查找input，注意不能在datagrid里面找，它属于iframe下面
行号赋给input id，后面返回输入的值就简单了
但是感觉这个方法有点跟框架对着干，不科学
然后发现onLoadSuccess确实可以让单元格一开始就变成输入框。。。。。
但是beginedit这东西里面的流程是对应一个单元格编辑的
一开始就初始化多个单元格成输入框的情况，它应付不了，就这样，结贴
kingkillua 2015-07-27
- 打赏
- 举报
我那么搞感觉不太科学，而且单元格跟return回来的input标签怎么个关系我更凌乱了
在onLoadSuccess里面写beginEdit可以吗
我试了下没效果
Braska 2015-07-27
- 打赏
- 举报
beginEdit是行编辑
按你的做法
监听input的change事件 ajax提交到后台保存
然后另一个datagrid reload一下
或者每行加个保存按钮 保存以后另一个datagrid再reload（这种做法跟beginEdit没差别）
kingkillua 2015-07-27
- 打赏
- 举报
field : 'REC_NUM',
title : '存储数量 ',
width : 100,
formatter: function(value,row,index){
return '<input name="xxx">';
}
这样是直接显示出文本框了，但是在里面输入的值怎么传到另外一个datagrid里面又没头绪了
kingkillua 2015-07-27
- 打赏
- 举报
datagrid.datagrid(’beginEdit‘,index);你这个方法放到哪个事件里
我需要表出来直接就beginedit，不需要单击或双击
Braska 2015-07-27
- 打赏
- 举报
可以 {field:'id',title:'ID',width:100,editor: { type: 'text'}}
加editor属性
datagrid.datagrid("beginEdit",index);// 开始编辑
Braska 2015-07-27
- 打赏
- 举报
beginEdit是行编辑
每行都是输入框的 我也不太懂
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<script src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<script type="text/javascript" src="locale/easyui-lang-zh_CN.js"></script>
<script>
//构造json数据
var data = [];
for (var i = 1; i < 31; ++i) {
data.push({
"id":i,
"text":"text" + i
})
}
$(function () {
loadTable();
});
var isEditable={};
function loadTable(){
$('#dg').datagrid({
title: '列表',
fitColumns: true,
pagination: true,
data:data.slice(0,5),
idField: 'id',
columns:[[
{field:'ck', checkbox: true},
{field:'id',title:'Id',width:100,editor:{type: 'text'}},
{field:'text',title:'Text',width:100,editor:{type: 'text'}}
]],
toolbar: [{
text: '编辑',
iconCls: 'icon-edit',
handler: function(){
if(isEditable['index'] != undefined){
$.messager.alert('提示','您正在编辑其他行，请先保存或取消编辑');
return;
}
var dt = $('#dg').datagrid("getSelected");
var index = $('#dg').datagrid("getRowIndex",dt);
if(index == null || index == -1){
$.messager.alert('提示','请先选择一行进行编辑');
return;
}
isEditable['index'] = index;
$('#dg').datagrid("beginEdit",index);
}
},'-',{
text:'取消编辑',
iconCls:'icon-cancel',
handler:function(){
if(isEditable['index'] != undefined){
$('#dg').datagrid("cancelEdit",isEditable['index']);
isEditable['index'] = undefined;
}
}
},'-',{
text:'保存',
iconCls:'icon-save',
handler:function(){
if(isEditable['index'] == undefined){
$.messager.alert('提示','请先选择一行进行编辑完后,再进行保存');
return;
}
$('#dg').datagrid("endEdit",isEditable['index']);
isEditable['index'] = undefined;
}
}],
onLoadSuccess: function(){
var index = 0;
var data = $('#dg').datagrid('selectRow',index);
if(data){
isEditable['index'] = index;
$('#dg').datagrid("beginEdit",index);
}
}
});
var p = $('#dg').datagrid('getPager');
$(p).pagination({
showRefresh: false,
total: data.length,
pageSize: 5,//每页显示的记录条数，默认为10
pageList: [5,10,15],//可以设置每页记录条数的列表
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
onSelectPage:function (pageNo, pageSize) {
var start = (pageNo - 1) * pageSize;
var end = start + pageSize;
$("#dg").datagrid("loadData", data.slice(start, end));
$(p).pagination('refresh', {
total:data.length,
pageNumber:pageNo
});
}
/*onBeforeRefresh:function(){
$(this).pagination('loading');
alert('before refresh');
$(this).pagination('loaded');
}*/
});
}
</script>
<style>
</style>
</head>
<table id="dg"></table>
</body>
</html>
