重发我的 HTML单据输入控件

       上次发的是想发到首页，可惜被转到软件发布区去了，汗！可能是因为我那篇文里里只是一些api介绍，没有给出诱人的东西。不知道这次是否也会,最近自己的感觉javsScript水平又提高了些，哈哈。

       今天我重新发布一次，这次发布程序的是已经在我最近的项目中实实在在应用的，效果还不错。而且将主要的功能都做在了一个html文档里。先来看一下效果图:

实现上面功能的具体javaScript脚本如下：

<script type="text/javascript">    
    var mytab;    
    $(document).ready(function(){
        mytab = new snTable("snryang");
        
        //处始化配置
        mytab.build({
            fields:[ 
                        {Field:"name",Text:"姓名",Editable:true},
                        {Field:"age",Editable:true,FV:{ 
                                                        M:"年龄范围为 1 至 120 ！",
                                                        V:{T:"F",P:ageValid}
                                                      }
                        },
                        {Field:"address",Editable:true},
                        {Field:"sex",Editable:true,Option:[{Text:"男",Value:"1"},{Text:"女",Value:"2",Default:true}]},
                        {Action:"DEL"}
            ],
            event:{
                snTableOnChange : onchange,
                snTableOnKeyUp  : onkeyup,
                snTableDeletedBefore : delBefore,
                snTableDeletedAfter  : delAfter    
            }
        });        
        
    });
    //单元格值发生改变
    function onchange(cell){
        alert("event snTableOnChange triggered");
    }
    //单元格按键
    function onkeyup(cell,input){
        //返回false将不会自动跳到下一单元格
    }
    //删除行之前
    function delBefore(row){
        //this 为行的element
        return confirm("确认是否要删除!,行数据:"+row.getJson());
    }
    //删除行之后
    function delAfter(table){
        //this 为表格的element
        alert("现有行数为 " + table.rows.length);
        UpdateCount();
    }
    
    
    //年龄验证
    function ageValid(value){
        value = Number(value);
        return value >=0 && value <=120 ;
    }
    
    //处始化数据
    function tableInit(){
        var datas = [
            {name:"张三",age:20,address:"四川省成都市",sex:"1"},
            {name:"李四",age:22,address:"四川省宜宾市",sex:"2"},
            {name:"王五",age:27,address:"四川省宜宾市南溪县",sex:"1"}
        ]
        mytab.bind(datas);
        UpdateCount();
    }
    
    //更新合计
    function UpdateCount(){
        mytab.getFootRow(0).getCell(1).text(mytab.getRow(0).getCell(1).sum());
    }
    
    //查看表格的json数据
    function lookJson(){
        alert(mytab.getJson());
    }
    
    //增加行
    function addRow(){
        var index = Number($("#txt_index").val());
        mytab.insertRow(
            {
                name:$("#txt_name").val(),
                age:$("#txt_age").val(),
                address:$("#txt_address").val(),
                sex:document.getElementById("ddl_sex").options[document.getElementById("ddl_sex").selectedIndex].value
            },
            index
        )
        UpdateCount();
    }
    //获取行
    function getRow(){
        var row = mytab.getRow(Number($("#txt_getIndex").val()));
        if(row == null) {
            alert("行不存在");
            return
        }
        row = row.getObject();        
        $("#txt_name").val(row.name);
        $("#txt_age").val(row.age)
        $("#txt_address").val(row.address)
        document.getElementById("ddl_sex").selectedIndex = row.sex-1;        
    }
    
    //删除行  代码删除行将不激发删除事件
    function delRow(){        
        var index = Number($("#txt_delIndex").val());
        mytab.deleteRow(index);
        UpdateCount();
    }
    
    //让第一行第一个单元格进入编辑状态
    function activeCell11(){
        mytab.getRow(0).getCell(0).activeCell();
    }
    
    //隐藏显示列
    function showhideColumn(){
        var column = mytab.getColumn(2);
        column.hide(!column.hide());
    }
    //设置/取消 家庭地址是否允许编辑
    function columnEditable(){
        var column = mytab.getColumn(2);
        column.editable(!column.editable());        
    }
    
    //退出编辑状态
    function exit(){
        mytab.exitEdit();
    }
    </script>

 

具体的API说明在这就不介绍了，和源码一起我已经打包。下载地址：/Files/snryang/sntable.rar