时间:2021-05-25
作者:xmg(小马哥)
复制代码 代码如下:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<style>
body{font-size:12}
table,input,button,select,textarea,b{font-size:12;font-family:宋体}
body{background:#ECE9D8}
td{border:1pxsolid#c0c0c0;display:inline}
.GridBorder{background:#ece9d8;border:1pxsolid#000;border-top:1pxsolid#FFF;border-left:1pxsolid#FFF;text-align:center;WORD-BREAK:break-all}
</style>
<script>
if(document.all){
Event.prototype.__defineGetter__("srcElement",function(){varnode=this.target;while(node.nodeType!=1){node=node.parentNode}returnnode})
Event.prototype.__defineGetter__("x",function(){returnthis.clientX+2})
Event.prototype.__defineGetter__("y",function(){returnthis.clientY+2})
}
function$(obj){returndocument.getElementById(obj)}
</script>
<BODY>
<tableid=datagrid>
<tr>
<tdwidth=15></td>
<tdwidth=50>字段一</td>
<tdwidth=50>字段二</td>
<tdwidth=50>字段三</td>
<tdwidth=50>字段四</td>
<tdwidth=50>字段五</td>
<tdwidth=50>字段六</td>
<tdwidth=50>字段七</td>
<tdwidth=50>字段八</td>
<tdwidth=50>字段九</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</BODY>
</HTML>
<script>
varobj=$("datagrid"),td
varbody=document.body
varDragObj=null
varobjxy=getxy(obj)
varDragborder=0
obj.style.cssText="background:#FFF;border-collapse:collapse"
for(vari=0;i<obj.rows.length;i++){
for(varj=0;j<obj.rows[i].cells.length;j++){
td=obj.rows[i].cells[j]
if(i==0){
td.className="GridBorder"
td.style.cssText="font-weight:bold"
}elseif(j==0){
td.className="GridBorder"
td.style.cssText="width:15px"
}else{
td.innerHTML="<inputtype=textvalue='"+td.innerHTML.replace(/ /gi,'')+"'style='width:100%;border:0px'>"
}
}
}
varfocus_img=document.createElement("IMG")
focus_img.src="http://bbs.51js.com/attachment.php?aid=7290&noupdate=yes"
if(typeof(Dline)!="object"){
varDragline=document.createElement("DIV")
Dragline.id="Dline"
Dragline.style.cssText="width:1px;border-left:1pxsolid#CCC;display:none;position:absolute"
body.appendChild(Dragline)
}
obj.onclick=function(){
vare=event,tr
varee=e.srcElement
if(ee.tagName=="INPUT"){
tr=ee.parentNode.parentNode
obj.rows[tr.rowIndex].cells[0].appendChild(focus_img)
}
}
obj.onmousemove=function(){
vare=event,tr
varee=e.srcElement
if(ee.tagName=="TD"&&ee.parentNode.rowIndex==0&&ee.cellIndex>0){
vara=getxy(ee)
if(event.x<(a[1]+5)||event.x>(a[1]+a[2]-5)){
body.style.cursor="col-resize"
objxy=getxy(obj)
}else{
body.style.cursor="default"
}
}
}
obj.onmousedown=function(){
vare=event
varee=e.srcElement
vara=getxy(ee)
if(body.style.cursor=="col-resize"){
if(event.x<(a[1]+5))
Dragborder=1
elseif(event.x>(a[1]+a[2]-5))
Dragborder=2
else
Dragborder=0
DragObj=ee
$("Dline").style.left=e.x
$("Dline").style.top=objxy[0]
$("Dline").style.height=objxy[3]
$("Dline").style.display=""
}
}
body.onmousemove=function(){
if(DragObj!=null){
$("Dline").style.left=event.x
body.style.cursor="col-resize"
}
}
body.onmouseup=function(){
if(DragObj!=null){
$("Dline").style.display="none"
body.style.cursor="default"
if(Dragborder==2){
vara=getxy(DragObj)
varw=event.x-a[1]
w=w<=0?0:w
DragObj.style.width=w
}
if(Dragborder==1){
varpnode=DragObj.previousSibling
vara=getxy(pnode)
varw=event.x-a[1]
w=w<=0?0:w
pnode.style.width=w
}
DragObj=null
}
}
functiongetxy(e){
vara=newArray()
vart=e.offsetTop;
varl=e.offsetLeft;
varw=e.offsetWidth;
varh=e.offsetHeight;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
a[0]=t;a[1]=l;a[2]=w;a[3]=h
returna;
}
</script>
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
先上效果图:前端数据表格:编号菜单名称菜单路径菜单图标菜单子菜单操作编辑删除js代码$(function(){//注意:这里是数据表格的加载数据,必须写layu
layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格实现搜索功能和数据表格重载全部代码加载数据表格按照layui官方文档示例HTML部分JavaS
数据表格中的数据是通过直接赋值的方式。这里实际上思想是反过来的,将拿数据表格中的所有数据,转换为Layui数据表格拿原始数据去渲染数据表格。1、创建一个作用域合
layui数据表格批量删除多条件搜索框:注样式自己写流水号:账号:咨询主题:时间:搜索删除按钮批量删除layui.use(['table','laydate']
AngularJS的数据表格需要使用angualarjs、bootstrap、dirPagination.js效果图:1.html部分angularjs的数据表