精华内容
下载资源
问答
  • 不可编辑 //注意要在开启行编辑之**前**完成设置editor空的操作 var ee = $('#FYDetailGrid').datagrid('getColumnOption', 'oneUpVal'); ee.editor={}; 单元格不可编辑 //注意要在开启行编辑之**后**...
    列不可编辑
    //注意要在开启行编辑之**前**完成设置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微服务中...LayUi的动态表格Table中每个td的内容可以设置为可

    相关阅读:

    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}); $("#...

    行编辑时特定单元格编辑

    设置列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

    展开全文
  • JavaScript动态设置table的高度

    万次阅读 2016-03-22 00:02:19
    这两天在调测系统的兼容性时遇到一个设置table高度的问题,页面功能很简单,就是页面中央一个文件,文件下方有一个保存按钮,文件内可以点击“添加项目按钮”来在该文件内增加表格数(这就意味着...最简单的动态设置t

    这两天在调测系统的兼容性时遇到一个设置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

    展开全文
  • 在要让文本能被选中的TD内加入 onselectstart="return false" onselect="document.selection.empty()" 宝宝(能选) 宝宝(可以选)
  • 需求:在表格上显示了多列信息,要求设置某列可编辑某列不可编辑 TableWidget默认状态下是单元格可编辑的,此时无需设置其状态 下图是单元格相关属性 设置不可编辑状态可通过如下方式实现: QTableWidgetItem...
  • Bootstrap-table-edit实现控制table列的编辑状态## 标题
  • 一、iview实现table可编辑 遇到同事请教的这个问题,没接触过iview,以为和element一样,只需要在table-column中使用作用域插槽即可,简单又方便,结果发现它居然是用reder函数进行渲染的,so,仔细琢磨一下,写...
  • Swing Jtable 设置单元格不可编辑

    千次阅读 2018-09-05 00:32:23
    提供的API也不能修改可编辑性,但可以通过重写AbstractTableModel来实现JTable 单元格不可编辑。 核心代码: class MyTableModel extends AbstractTableModel{  @override  public boolean ...
  • 本文在 iview table 点击是input(可编辑)的render函数中如何设置元素的样式(1)的基础上新增加了,当初始化为空时,点击也有input 出现 以及传值时,如何传变量; 先上效果图: 2个事项: ①:当 input初始...
  • $("#grid-table").jqGrid('setGridParam',{ cellEdit:true, cellsubmit : 'clientArray', beforeEditCell : function(rowid,cellname,value,iRow,iCol){ lastrow = iRow; lastcell =
  • layui的table可编辑扩展下拉框编辑器

    万次阅读 多人点赞 2018-10-09 12:25:32
    layui的table单元格编辑类型(默认开启)目前只支持:text(输入框)。 需求希望能使用下拉框编辑。 最终效果图: 实现原理: 1.单元格内容使用layui的templet功能。如: {field:'jtcyGxmc', title: '关系...
  • Bootstrap-table动态新增行,删除行,可编辑 效果图 html <div class="table-box" style="margin: 20px;"> <div id="toolbar"> <a id="addRow" onclick="addRow()">添加行</a> <a id...
  • 本文部分转自:...方法一: 通过QTableWidget中的item( )方法可以获得相应行数和列数的QTableWidgetItem,若要设置该Item的编辑状态(即可编辑状态和不可编辑状态),可以通过QTableWidgetIte
  • C#winform设置textbox属性不可编辑

    万次阅读 2014-06-03 21:44:19
    Java Web开发如何设置单选按钮的属性,使得一旦选中某一个单选按钮,就不可编辑单选按钮...请问如何在C1FlexGrid中设置某个单元格不可编辑当我把某一列设置为不可编辑时,又想设置其中的一个单元格处于可编辑状态,应该
  • 在网上找了下这方面资料都不太满足自己需求,自己就写了个,里面有初始数据都不可编辑只有手动点击插入新的行是可编辑;还有是初始数据全部可编辑,插入新行也是可编辑的,全部编辑形式是input框里直接编辑,失去...
  • antd Table中插入可编辑的单元格

    万次阅读 热门讨论 2018-08-30 16:08:29
    看了antd Table 的官方组件,发现太灵活,所以自己动手写了一下。 实现的思路大同小异,在columns中插入Input,很简单的,直接render中返回就好,只是中间遇到小插曲,改变一个input的值所有的都跟着改变,原来是...
  • Bootstrap 不可编辑的控件

    千次阅读 2018-03-07 09:51:10
    Bootstrap中,允许任何标签添加 .uneditable-input 类,来创建不可编辑的控件。如,使用 &lt;span&gt; 标签创建一个不可编辑的文本输入框,让它看上去像个文本输入框,但实际上不是文本输入框,也不可编辑...
  • 在做web项目时,jsp页面有时候会根据业务需要添加一些默认值,而且部分默认值是允许修改的,这样就牵扯到另外一个问题,当用户在页面填写表单用table键切换的时候,允许修改的默认行会出现选中光标,触发onblur...
  • ant design Table实现可编辑的单元格

    万次阅读 2018-12-21 21:06:09
    最近接到的一个需求,在table栏中实现属性的可编辑单元格,并且table内部动态动态删减的单元格,外部操作新增或删除一行新旧数据的操作,无交互的前端实现,这篇文章希望对你有帮助。 想法或思路 如何去实现这一...
  • 如果只是实现element的table表格数据可编辑请到:https://blog.csdn.net/zeng092210/article/details/91385673 1.实现表头的动态渲染 2.表头label和prop字段都要定义 3.去判断显示那个数据表 4.实现双击的...
  • 2:可以动态编辑第三列和第四列,并且只能编辑属于此合并行的第三列和第四列,比如第一个编辑按钮点击后,只有前三行可以编辑 3:第一列的数据是根据第三列相加得来的 4:点击快捷填写,可以快速填写第三列和第四...
  • 将SWT中的Text设置为不可编辑

    千次阅读 2010-11-29 22:09:00
    方法:text.setEditable(false);setEditable(false)和setEnable(false)不同。前者是内容不可编辑,右键菜单仍是可用的;后者是设置控件的可用性,此时右键菜单不可用,背影色是灰的。
  • 当时写这个地方的时候需要在一定条件下把QtWidgets表格的一部分单元格设为不可编辑,在一定条件下又把它们设为可编辑,给我恶心坏了,PyQT的QtWidgets真是反人类的设计。 需要先定义一个有某种特征的QTableWidget...
  • Jquery可编辑table

    千次阅读 2013-03-21 09:41:52
    今天来演示一个用jquery完成的效果:可编辑的表格。 1.先写一个含有表格的页面jqueryEdit.html:  "http://www.w3.org/TR/html4/loose.dtd">  jquery示例3:可修改的表格
  • 因为项目需要,要对element ui中table表格的多选按钮进行 可勾选和不可勾选 的操作。代码大概如下: &lt;template&gt; &lt;el-table  ref="multipleTable"  :data="tableData" ...
  • ant design Table可编辑的单元格改进版

    万次阅读 热门讨论 2019-05-31 18:18:24
    antd官方也有给文档,...这里table的columns的写法,如下: const columns2 = [ { title: '尺寸名称', dataIndex: 'name', filterDropdown: true, filterIcon: <Icon type="edit"/>, render: () => &l...
  • QTableWidget设置某列不可编辑

    千次阅读 2019-12-02 13:49:02
    item = new QTableWidgetItem(str); item->setFlags(item->flags() & (~Qt::ItemIsEditable)); item->setFlags(Qt::NoItemFlags);
  • bootstrap table 可编辑

    千次阅读 2018-11-27 18:31:01
    https://blog.csdn.net/Jessie_is_Gemini/article/details/72188640 出现这个问题就是js引入错误,应该引bootstrap3下的js

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 141,836
精华内容 56,734
关键字:

动态设置table为不可编辑