列不可编辑
 
//注意要在开启行编辑之**前**完成设置editor为空的操作
var ee = $('#FYDetailGrid').datagrid('getColumnOption', 'oneUpVal');
ee.editor={};
 
单元格不可编辑
 
//注意要在开启行编辑之**后**设置该单元格不可用
var ff = $('#FYDetailGrid').datagrid('getEditor', { index:editIndex, field: 'oneUpVal' });
$(ff.target).attr('disabled', true);
//或者
$(ff.target).attr('disabled','disable');
 
一定一定要注意行编辑开启的顺序呐！
 开启行编辑之后对于列的不可编辑的设置就无效了！

相关阅读：
 
X-admin2.2打开页面（添加弹窗），执行成功后如何关闭弹出窗口和刷新table表格内容？
 
基于X-admin2.2的后台管理系统登录实现
 
Spring Boot+JPA微服务中数据更新问题(update)
 
Spring Boot集成X-admin2.2时，Layui字体图标无法正常显示或乱码问题解决方法
 
LayUi搜索时，如何只刷新表格内容，其他内容不变？
 
ZTree工具类汇总，包括：新增、编辑和删除节点，并提交后台
 
LayUi的动态表格Table中每个td的内容可以设置为可编辑，同时监听我需改，并提交到后台。但是表格中编辑时如果是select下拉框，则处理起来相对麻烦一些。具体各部分操作如下。 
 
 
1.单元格内容使用layui的templet功能。
 
如： {field:'jtcyGxmc', title: '关系名称',templet: '#selectGxmc',sort:false} 

    	
    <select name='roleId' id='roleId'  lay-filter="roleId[Select](http://www.blog2019.net/tag/Select?tagId=271)" data-value = {{d.roleId}}  lay-verify='' lay-search=''>    
        {{d.roleSelect}}
    </select>
 
其中select标签务必设置： lay-filter，否则修改的监听无法使用；
 
后端代码：
 
由于需要选中默认值，且在前台操作较为麻烦，故在后台进行了处理，如下所示：
 
@Override
public Page<User> paging(Pageable pageable, String name, Long departId) {
	Page<User> page = userRepository.findAll((root, query, builder) -> {
		Predicate predicate = builder.conjunction();
		if (com.tdata.bplatform.utils.String.StringUtils.isNotBlank(name)) {
			predicate.getExpressions().add(builder.like(root.get("username"), "%" + name + "%"));
		}
		if (com.tdata.bplatform.utils.String.StringUtils.isNotBlank(departId)) {
			predicate.getExpressions().add(builder.equal(root.get("departId"), departId));
		}
		query.orderBy(builder.desc(root.get("lastLogin")));
		return predicate;
	}, pageable);

	List<User> rets = new ArrayList<>();
	page.getContent().forEach(n -> rets.add(n));
	List<Role> roleList = roleRepository.findAll();
	List<User> users = page.getContent();
	users.forEach(item -> {
		for (Role role : roleList) {
			if (com.tdata.bplatform.utils.String.StringUtils.isNotBlank(item.getRoleId())
					&& role.getId() == item.getRoleId().longValue()) {
				item.setRole(role);
				if (com.tdata.bplatform.utils.String.StringUtils.isNotBlank(item.getRoleId())) {
                //处理前端select中的option对象，并设置默认值；
					item.setRoleSelect(getRoleSelect(roleList, item.getRoleId()));
				}
				break;
			}
		}
	});
	return new PageImpl<>(rets, pageable, page.getTotalElements());
}

/**
 * 根据roleID设置默认选择，以及构造option值；
 * 
 * @2020年6月7日 下午5:52:50
 *
 * @Title: getRoleSelect
 * 
 * @Description: TODO(这里用一句话描述这个方法的作用)
 * 
 * @param @param roleList
 * 
 * @param @param roleId
 * 
 * @return String 返回类型
 * 
 * @throws
 */
public String getRoleSelect(List<Role> roleList, Long roleId) {
	String str = "";
	for (Role role : roleList) {
		str += "<option value=\"" + role.getId() + "\" "
				+ (role.getId() == roleId.longValue() ? "selected=\"selected\"" : "") + " > " + role.getRoleName()
				+ "</option> ";
	}
	System.out.println(str);
	return str;
}
 
2.然后单元格内容就变成了可编辑的下拉框。
 
3.由于默认样式有些问题，需要调整下样式。
 
/* 防止下拉框的下拉列表被隐藏---必须设置--- */        
.layui-table-cell {            
    overflow: visible !important;        
} 
/* 使得下拉框与单元格刚好合适 */       
td .layui-form-select{	
    margin-top: -10px;	
    margin-left: -15px;	
    margin-right: -15px;
}
 
4.模板代码中给select标签增加data-属性，用于保存对象的id值。下拉框选择时会触发以下代码
 
	//下拉框监听事件
	form.on('select(roleIdSelect)', function(data) {
		//获取行tr对象
		var elem = data.othis.parents('tr');
        //获取第一列的值，第一列为ID列，
		var id = elem.first().find('td').eq(1).text();
        //选择的select对象值；
        var selectValue=data.value;
		//处理字段更新的逻辑
	});
 
#Select #LayUi #X-admin2.2

 
行编辑时特定单元格编辑
 
 
设置列qtype的editable属性值为true，表示此字段可编辑；然后设置id对应的行进入编辑状态，此时该行中所有的可编辑列都将进入编辑状态。
 
 
 
  
$("#jqgridTable").setColProp("qtype",{editable:true});
$("#jqgridTable").editRow(id,true);
 
 
 
 
qtype 列名  id 行id值
 
 
行编辑时特定单元格不可编辑
 
 
 
  
$("#jqgridTable").setColProp("qtype",{editable:false});
$("#jqgridTable").editRow(id,true);
 
 
 
 
　
 
 
 
 
转载于:https://www.cnblogs.com/x-g-a/p/9877391.html

这两天在调测系统的兼容性时遇到一个设置table高度的问题，页面功能很简单，就是页面中央一个文件，文件下方有一个保存按钮，文件内可以点击“添加项目按钮”来在该文件内增加表格数（这就意味着文件的高度随时可能发生变化）。现在的问题是IE显示正常，但是chrome中保存按钮框始终出现在文件的中央（真想偷懒设置一个定死的高度，呵呵，1365px，不要问我怎么知道，我没有这么 想过~_~）。
 
最简单的动态设置table高度很容易实现，动态获取当前文件的高度然后赋值给保存按钮就可以了。
 
function com_onresize(){

        //clientHeight的值由DIV内容的实际高度和CSS中的padding值决定，
        //而offsetHeight的值由DIV内容的实际高度，CSS中的padding值，scrollbar的高度和DIV的border值决定；
        //至于CSS中的margin值，则不会影响 clientHeight和offsetHeight的值
        var contentsHeight = document.body.clientHeight;
        var buttonsHeight = document.getElementById( "buttons" ).offsetHeight;
        var head1Height = document.getElementById( "head1" ).offsetHeight;
        var head2Height = document.getElementById( "head2" ).offsetHeight;

        var h = contentsHeight - buttonsHeight - head1Height - head2Height - 13;
        if(h < 110){
            return;
        }
            //设置table的行高
            document.getElementById( "TableContainer1" ).style.height = h/2 + 'px';
            document.getElementById( "TableContainer2" ).style.height = h/2 + 'px';
        }

        function com_sbs_pagesize(){

            //window.screen.availWidth     返回当前屏幕宽度(空白空间) 
            //window.screen.availHeight     返回当前屏幕高度(空白空间) 
            //window.screen.width     返回当前屏幕宽度(分辨率值) 
            //window.screen.height     返回当前屏幕高度(分辨率值) 
            //window.document.body.offsetHeight;     返回当前网页高度 
            //window.document.body.offsetWidth;     返回当前网页宽度 

            var screenHeight = window.screen.height;
            var availHeight = window.screen.availHeight;
            var index = document.getElementById( "TableContainer1" ).children[0].rows.length;
            var buttonsHeight = document.getElementById( "buttons" ).offsetHeight;
            var head1Height = document.getElementById( "head1" ).offsetHeight;
            var head2Height = document.getElementById( "head2" ).offsetHeight;

            var mainH = buttonsHeight + head1Height +head2Height + 13;
            while ((availHeight-mainH) < (20 + 35 + 25*index)*2){
                index = index - 1;
            }
            var tableHeight = 20 + 35 + 25*index;
            document.getElementById( "TableContainer1" ).style.height = tableHeight + 'px';
            document.getElementById( "TableContainer2" ).style.height = tableHeight + 'px';
            //window.resizeTo(width,height)方法用于把窗口大小调整为指定的宽度和高度
            window.resizeTo(document.body.offsetWidth,mainH + tableHeight*2);

}
 
但是问题是我来改这个bug的时候发现这个文件被分成了多个div多个table，前台页面写的好乱！而且当我去尝试使用JS脚本给TR的style.height属性赋值，这个高度设定并不能表现出来，上网搜了一下，别人是这样回答的：
 
确实在Chrome，使用JS脚本给TR的style.height属性赋值，不能表现出来。愚以为，TR元素只是容纳定位TD元素的容器，它本身并没有外观。给TR的height赋值，是把其height属性传递给了其中的TD。使用JS赋值的时候，IE和FF都把值传递给了TD，Chrome要么是没有给TD传递这个值，要么传递了没有表现出来。我认为前者可能性比较大。
 
然后我又查了一下W3C里面<tr>和<td>的属性
 
<tr>标签的可选属性
 
 
<td>标签的可选属性
 
 
问题就显而易见了。
 
附录：
 
网页可见区域宽： document.body.clientWidth; 
 网页可见区域高： document.body.clientHeight; 
 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 
 网页可见区域高： document.body.offsetHeight (包括边线的宽); 
 网页正文全文宽： document.body.scrollWidth; 
 网页正文全文高： document.body.scrollHeight; 
 网页被卷去的高： document.body.scrollTop; 
 网页被卷去的左： document.body.scrollLeft; 
 网页正文部分上： window.screenTop; 
 网页正文部分左： window.screenLeft; 
 屏幕分辨率的高： window.screen.height; 
 屏幕分辨率的宽： window.screen.width; 
 屏幕可用工作区高度： window.screen.availHeight; 
 屏幕可用工作区宽度：window.screen.availWidth;
 
scrollHeight: 获取对象的滚动高度。 
 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 
 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 
 scrollWidth:获取对象的滚动宽度 
 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 
 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 
 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 
 event.clientX 相对文档的水平座标 
 event.clientY 相对文档的垂直座标
 
event.offsetX 相对容器的水平坐标 
 event.offsetY 相对容器的垂直坐标 
 document.documentElement.scrollTop 垂直方向滚动的值
 
offsetParent.scrollTop 表示上层定位容器滚动了多少高度
 
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量；
 
要获取当前页面的滚动条纵坐标位置，用： 
 document.documentElement.scrollTop;而不是：document.body.scrollTop;
 
documentElement 对应的是 html 标签，而 body 对应的是 body 标签
 
document.body.scrollWidth很好理解, 就页面不带右边滚动条的长度。
 
document.body.scrollHeight指页面的总高度，当前一屏显示高度再加上纵向滚动条滚动到底的高度
 
document.documentElement.scrollTop和document.body.scrollTop涉及到chrome浏览器的兼容性问题：
 
当页面加入DTD标示后 document.documentElement.scrollTop的值在IE和FF下正常，但document.body.scrollTop一直为0。在Chrome下就反过来了；
 
最后编辑时间：2016-03-22