写的htc的数据表格

2024-09-28 08:09:22

作者: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:1px solid #c0c0c0;display:inline}
.GridBorder{background:#ece9d8;border:1px solid #000;border-top:1px solid #FFF;border-left:1px solid #FFF;text-align:center;WORD-BREAK:break-all}
</style>
<script>
if(document.all){
    Event.prototype.__defineGetter__("srcElement",function(){var node=this.target;while(node.nodeType!=1){node=node.parentNode}return node})
    Event.prototype.__defineGetter__("x",function(){return this.clientX+2})
    Event.prototype.__defineGetter__("y",function(){return this.clientY+2})
}
function $(obj){return document.getElementById(obj)}
</script>
<BODY>
<table id=datagrid>
  <tr>
    <td width=15></td>
    <td width=50>字段一</td>
    <td width=50>字段二</td>
    <td width=50>字段三</td>
    <td width=50>字段四</td>
    <td width=50>字段五</td>
    <td width=50>字段六</td>
    <td width=50>字段七</td>
    <td width=50>字段八</td>
    <td width=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>
var obj=$("datagrid"),td
var body=document.body
var DragObj=null
var objxy=getxy(obj)
var Dragborder=0
obj.style.cssText="background:#FFF;border-collapse:collapse"
for(var i=0;i<obj.rows.length;i++){
    for(var j=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"
        }else if(j==0){
            td.className="GridBorder"
            td.style.cssText="width:15px"
        }else{
            td.innerHTML="<input type=text value='"+td.innerHTML.replace(/ /gi,'')+"' style='width:100%;border:0px'>"
        }
    }
}
var focus_img=document.createElement("IMG")
focus_img.src="http://bbs.51js.com/attachment.php?aid=7290&noupdate=yes"
if(typeof(Dline)!="object"){
    var Dragline=document.createElement("DIV")
    Dragline.id="Dline"
    Dragline.style.cssText="width:1px;border-left:1px solid #CCC;display:none;position:absolute"
    body.appendChild(Dragline)
}
obj.onclick=function(){
    var e=event,tr
    var ee=e.srcElement
    if(ee.tagName=="INPUT"){
        tr=ee.parentNode.parentNode
        obj.rows[tr.rowIndex].cells[0].appendChild(focus_img)
    }
}
obj.onmousemove=function(){
    var e=event,tr
    var ee=e.srcElement
    if(ee.tagName=="TD"&&ee.parentNode.rowIndex==0&&ee.cellIndex>0){
        var a=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(){
    var e=event
    var ee=e.srcElement
    var a=getxy(ee)
    if(body.style.cursor=="col-resize"){
        if(event.x<(a[1]+5))
            Dragborder=1
        else if(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){
            var a=getxy(DragObj)
            var w=event.x-a[1]
            w=w<=0?0:w
            DragObj.style.width=w
        }
        if(Dragborder==1){
            var pnode=DragObj.previousSibling
            var a=getxy(pnode)
            var w=event.x-a[1]
            w=w<=0?0:w
            pnode.style.width=w
        }
        DragObj=null
    }
}
function getxy(e){
    var a=new Array()
    var t=e.offsetTop;
    var l=e.offsetLeft;
    var w=e.offsetWidth;
    var h=e.offsetHeight;
    while(e=e.offsetParent){
        t+=e.offsetTop;
        l+=e.offsetLeft;
    }
    a[0]=t;a[1]=l;a[2]=w;a[3]=h
  return a;
}
</script>

写的htc的数据表格

作者: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:1px solid #c0c0c0;display:in
bootstrap table 数据表格行内修改的实现代码

js中设置列的属性 editable : { type : 'text',//数据显示在文本框内 emptytext : "--",//数据为空时显示 validate : function(value) { if ($.trim(value) == '') { return '不能为空';//修改是数据为空显示 } } } js中设置bootstrop-table加载数据时属性 onEditableSave : function(field, row, oldValue, $el)
React 全自动数据表格组件——BodeGrid的实现思路

表格是在后台管理系统中用的最频繁的组件之一,相关的功能有数据的新增和编辑.查询.排序.分页.自定义显示以及一些操作按钮.我们逐一深入进行探讨以及介绍我的设计思路: 表格是在后台管理系统中用的最频繁的组件之一,相关的功能有数据的新增和编辑.查询.排序.分页.自定义显示以及一些操作按钮.我们逐一深入进行探讨以及介绍我的设计思路: 新增和编辑想想我们最开始写新增编辑页面是怎么做的,是不是一个页面一个页面的写,然后要么表单提交要么Ajax提交.后台有无数个新增和编辑的视图页,现在想想真是恐怖啊,看着都
EasyUI 数据表格datagrid列自适应内容宽度的实现

项目初期在加载数据表格的时候为了提高表格数据渲染速度,设置了默认宽度. 现需求需要加一个表格自适应的功能,触发改功能,改变列宽度,但是不重新渲染表格,不发生数据请求. 设计思路,遍历每项的所有数据,比较字节符串长度,取最大长度.再用最大长度和标题长度比较,如果标题长就去标题长度,如果字符串长,就取字符串的. js //表格自适应方法 function changeWidth(agstr){ var dg = $('#'+agstr); dg.datagrid("loading");//
layui 数据表格点击分页按钮监听事件的实例

找了很多关于表格分页点击事件请求, table.render 并不支持监听点击事件,所以我就把 table.render 和 laypage.render结合在一起 (我也不想写分页的,但是后台讲数据多 ,要加分页,被逼无奈 ,想了一个方法) 先上图代码 .html <div> <table class="layui-hide" id="test" lay-filter="demo"></table>
Layui 数据表格批量删除和多条件搜索的实例

layui数据表格批量删除多条件搜索框:注样式自己写 <div class="demoTable" style="width: 968px; margin:20px auto;color: #7185a2"> 流水号: <div class="layui-inline"> <input class="layui-input" name="FlowNumber" id=&quo
layui问题之渲染数据表格时,仅出现10条数据的解决方法

一.问题 ajax获取服务端数据之后,要动态渲染table,但数据仅仅数显了10条,并没有渲染所有的数据. 二.经过看一下表格需要的数据,0-9条的数据都自动有一个名为LAY_TABLE_INDEX的键值对,但10条及之后的数据都没有这个键值对. 很是纳闷,这个表格不带分页功能,应该不需要写limit对数据进行限制 table.render({ elem: '#orderTable' ,height: 400 ,cols: [[ //标题栏 {field: 'status', title: "
layui form表单提交之后重新加载数据表格的方法

HTML form表单 <p style="text-align: center"><img src="//files.jb51.net/file_images/article/201909/20190911173925.jpg" alt="" /></p> <div class="layui-row"> <form class="layui-form layui
Layui数据表格前后端json数据接收的方法

先上效果图: 前端数据表格: <div class="x-body"> <%-- 数据表格 --%> <table class="layui-table" lay-data="{ id:'test', url:'/menu/page', page:true, limits: [10,20,50], //每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90] limit: 10, //每页默认显示的数量
Layui数据表格判断编辑输入的值,是否为我需要的类型详解

因为很多使用layui插件做的表格都需要用到layui的表格编辑事件,但是编辑事件是可以随意输入值的,但是如果当我们的字段为数量的时候,又需要获取到数量传进控制器进行数据处理的时候,而控制器接收的数量为int类型.倘若我输入的数量不是整数类型,那么就无法传进控制器,直接报404,找不到url中的方法所有在使用重载前,最好先对用户输入的值进行一下判断,判断是否符合条件,允许传进控制器比如我项目中的表格我这个项目要求是,当用户输入的数量大于该商品在该仓库的库存时,就会提醒用户,并且将数量的值,

写的htc的数据表格

相关推荐

随机推荐