jointjs如何设置图形不可编辑

JavaScript014

jointjs如何设置图形不可编辑,第1张

将弹出层设置为position:absolutez-index:101再使用一个层div2，width:100%,height:100%.z-index:100,position:absolute这样div2会覆盖整个页面，页面上的任何元素都不可点击(页面中元素的默认z-index为0，如果有高的z-index需要将div2的z-index设置的更高些)禁止滚动可以给body添加overflow:hidden这样就不会显示滚动条，不能滚动

文本框不可以编辑可以用两个属性来控制：

readonly，只读属性，文本可以选择、复制，但是不可以改变文本值

disabled，不可选择、复制、改变文本值。

  js控制打开对话框的时候，同时改变对话框中的文本框的属性即可。

jq方法

$("input[type=text]").prop('readonly','readonly')

或者

$("input[type=text]").prop('disabled','disabled')

原生 javascript 示例 ( 表格+input )：

<table border="0" cellspacing="0" cellpadding="1" style="text-align: center">

<tr><td></td><td>A</td><td>B</td><td>C</td><td>D</td></tr>

<tr><td>1</td><td><input type="text" id="A1"/></td><td><input type="text" id="B1"/></td><td><input type="text" id="C1"/></td><td><input type="text" id="D1"/></td></tr>

<tr><td>2</td><td><input type="text" id="A2"/></td><td><input type="text" id="B2"/></td><td><input type="text" id="C2"/></td><td><input type="text" id="D2"/></td></tr>

<tr><td>3</td><td><input type="text" id="A3"/></td><td><input type="text" id="B3"/></td><td><input type="text" id="C3"/></td><td><input type="text" id="D3"/></td></tr>

</table>

&nbsp&nbsp&nbsp<span id="hints"></span>

<script type="text/javascript">

function validCell(me){

var thisid=me.id//获取当前点击的输入单元格内的input框的id

var preId=thisid.substr(0,1)+(parseInt(thisid.substr(1),10)-1)//计算得上一行对应位置的input框的id

var preEle=document.getElementById(preId)//获取一行对应位置的input框对象

if(preEle!=null){//如果存在上一行对应位置的input

if(preEle.value==""){//且 上一行对应位置的input已经输入了内容

document.getElementById("hints").innerText="请先填写上一行对应的单元格: "+preId

me.setAttribute("readonly","true")//设置为不可编辑

}else{

me.removeAttribute("readonly")//去除只读属性，使其可输入内容

document.getElementById("hints").innerText=""//清除提示

}

}

}

</script>

<script type="text/javascript">

var inputs = document.getElementsByTagName("input")

for (var i in inputs) {

if(inputs[i].type=="text"){//为所有 input text 框添加点击事件

inputs[i].setAttribute("onclick","validCell(this)")

}

}

</script>