The oop from zhoushaw

oop's People

Contributors

oop's Issues

表格组件如何使用

//引入样式，和表格组件函数

//定义好需要的参数
var animo = [
    {id:'001',name:'大象',type:'哺乳',weight:'1T'},
    {id:'002',name:'熊猫',type:'哺乳',weight:'200kg'},
    {id:'003',name:'老虎',type:'哺乳',weight:'400kg'}
  ];


window.onload = function(){

//定义删除函数
    function delAnimal(ID){
      for(var i=0;i<animo.length;i++){
        if(animo[i].id==ID){
          animo.splice(i,1);
        }

      }
    }
    //增加函数
    function addAnimal(animal){
      animo.push(animal);
    }
    //上传函数

    function updateAnimal(animal){
      for(var p in animo){
        if(animo[p].id==animal.id){
          for(var i in animal){
            animo[p][i]=animal[i];
          }
        }
      }
    }

    grid({
      title:'动物信息列表',     //表格标题(*必填)
      data:animo,                //数据来源，（*选填）
      container:'con',           //表格存放容器,（*选填）
      key:'id',                       //定义数据关键词,（*选填）
      delfn:delAnimal,        //删除函数定义（*选填）
      addfn:addAnimal,     //添加数据函数,（*选填）
      updatafn:updateAnimal,             //上传数据函数，如果需要上传到服务器，数据库，填写（*选填）
      fields:[                        //数据弹窗格式，（*选填）
        {name:'id',type:'text'},
        {name:'name',type:'text'},
        {
          name:'type',type:'select',
          option:[
            {name:'哺乳',text:'哺乳'},
            {name:'胎生',text:'胎生'},
            {name:'爬行',text:'爬行'}
          ]

        },
        {name:'weight',weight:'weight',type:'text'}
        ]
    });
  }

轮播图组件如何使用

<link rel="stylesheet" href="show.css">
//引入轮播图样式表
<script src="jquery-3.2.1/jquery-3.2.1.min.js"></script>
<script src="imageshow.js"></script>
<script>
$(function(){
  var arr=['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg',];
  //将你需要展示的图片放到arr数组中，
  
  Carousel({
    container:'body',
    //图片放置的位置
    arrImages:arr,
    //图片信息  
  });
});
</script>