easyui里datagrid的单元格能弄成输入框吗

kingkillua 2015-07-27 08:58:00
我知道edit属性可以让datagrid点击某单元格后变成可编辑
但我想做成不点击也直接显示的是输入框
就是像下面这种,存储数量里直接就是输入框
别人会知道只有那里是可以编辑的
...全文
1945 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
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
  • 打赏
  • 举报
回复
引用 3 楼 kingkillua 的回复:
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
  • 打赏
  • 举报
回复
引用 1 楼 Ragin 的回复:
可以 {field:'id',title:'ID',width:100,editor: { type: 'text'}} 加editor属性 datagrid.datagrid("beginEdit",index);// 开始编辑
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
  • 打赏
  • 举报
回复
引用 5 楼 kingkillua 的回复:
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>

87,885

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧