<!DOCTYPE html>
<html>
<head>

<style>
body {
  font-family: Helvetica Neue, Arial, sans-serif;
  font-size: 14px;
  color: #444;
}

table {
  border: 2px solid #42b983;
  border-radius: 3px;
  background-color: #fff;
}

th {
  background-color: #42b983;
  color: rgba(255,255,255,0.66);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -user-select: none;
}

td {
  background-color: #f9f9f9;
}

th, td {
  min-width: 120px;
  padding: 10px 20px;
}

th.active {
  color: #fff;
}

th.active .arrow {
  opacity: 1;
}

.arrow {
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  margin-left: 5px;
  opacity: 0.66;
}

.arrow.asc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #fff;
}

.arrow.dsc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #fff;
}

#search {
  margin-bottom: 10px;
}

</style>

<script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
<!-- component template -->
<script type="text/x-template" id="grid-template">
  <table>
    <thead>
      <tr>
        <th v-for="key in columns">
          {{key}}
         
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(index,entry) in data" track-by="temp">
        <td >
          {{entry.name}}
        </td>
  <td >
          {{entry.power}}
        </td>
  <td >
         ----------------------- {{entry.item1}}---------------
        </td>
  <td >
          {{entry.item2}}
        </td>
  <td >
  
         <demo-select :data="entry.list" :list="entry" :name="'cate1'" :dir="index" :value="entry.item1"></demo-select>
        </td>
      </tr>
    </tbody>
  </table>
</script>

<script type="text/x-template" id="select-template">
  <select v-model="selected" value="value">
    <option v-for="entry in data |wrap dir list   name  selected  ">{{entry}}</option>
  </select>
</script>

<!-- demo root element -->
<div id="demo">
  <form id="search">
    Search <input name="query" v-model="searchQuery">
  </form>
  <demo-grid
    :data="gridData"
    :columns="gridColumns" >
  </demo-grid>
</div>
</body>
</html>
<script>

// register the grid component
Vue.component('demo-grid', {
  template: '#grid-template',
  props: {
    data: Array,
    columns: Array
  }
})

Vue.component('demo-select', {
  template: '#select-template',
  props: {
    data: Array,
    list: Object,
 name:'',
 dir:'',
 value:''
     }
})

// bootstrap the demo
var demo = new Vue({
  el: '#demo',
  data: {
    searchQuery: '',
    gridColumns: ['name', 'power','item1','item2','list'],
    gridData: [
      { name: 'Chuck Norris',temp:1, power: Infinity,item1:"1",list:[1,2,3] ,datalist:[{item1:1,item2:2},{item1:3,item2:4}]},
      { name: 'Bruce Lee',temp:2, power: 9000 ,item1:"",list:[1,2,3] ,datalist:[{item1:1,item2:2},{item1:3,item2:4}]},
      { name: 'Jackie Chan', temp:3,power: 7000,item1:"",list:[1,2,3] ,datalist:[{item1:1,item2:2},{item1:3,item2:4}] },
      { name: 'Jet Li',temp:4,power: 8000,item1:"",list:[1,2,3] ,datalist:[{item1:1,item2:2},{item1:3,item2:4}] }
    ]
  }
})

Vue.filter("wrap",function(value,dir,entry,type,selected){
console.info(demo.gridData[dir].item1);
console.info(demo.gridData[dir].item1==selected);

if(demo.gridData[dir].item1==selected)
 {
   return value;
 }
    
      demo.gridData.$remove(entry);
     entry.item1=3;
   
   demo.gridData.push(entry);
return value;
})

</script>

datagrid的更多相关文章

  1. ASP.NET Aries 入门开发教程7：DataGrid的行操作（主键操作区）

    前言: 抓紧勤奋,再接再励,预计共10篇来结束这个系列. 上一篇介绍:ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑 本篇介绍主键操作区相关内容. 1:什么时候有默认的 ...

  2. JQuery easyUI DataGrid 创建复杂列表头(译)

    » Create column groups in DataGrid The easyui DataGrid has ability to group columns, as the followin ...

  3. ASP.NET Aries DataGrid 配置表头说明文档

    DataGrid 配置表头 字段 中文 说明 Field 字段 注意:mg_ 开头的字段为层级表头 Title 列称 OrderNum 序号 显示的顺序(冻结和非冻结列是两个组的序号) Width 列 ...

  4. ASP.NET Aries JSAPI 文档说明：AR.DataGrid、AR.Dictionary

    AR.Global 文档 1:对象或属性: 名称 类型 说明 DG 对象 DataGrid操作对象 //datagrid集合,根据ID取出DataGrid对象,将Json当数组用. Items: ne ...

  5. ASP.NET Aries JSAPI 文档说明：AR.DataGrid

    AR.DataGrid 文档 用法: <body> <table id="dg"></table> </body> </htm ...

  6. ASP.NET MVC5+EF6+EasyUI 后台管理系统（7）-MVC与EasyUI DataGrid

    系列目录 本节知识点 为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI读取MVC后台Json数据 开始实现 我们的系统似乎越来越有趣了 首先从前端入手,开打View下面的Sh ...

  7. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（8）-MVC与EasyUI DataGrid 分页

    系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI Datagrid在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台 实 ...

  8. 控制EasyUI DataGrid高度

    这次要说的是控制EasyUI的高度,平时我公司的项目,用EasyUI较多,然后datagrid这个组件是用的非常多的.平时我们都是固定高度,常见代码如下:             <table  ...

  9. GridView/DataGrid行单击和双击事件实现代码_.Net教程

    功能: 单击选中行,双击打开详细页面 说明:单击事件(onclick)使用了 setTimeout 延迟,根据实际需要修改延迟时间 ;当双击时,通过全局变量 dbl_click 来取消单击事件的响应  ...

  10. WPF DataGrid 行选中相关

    DataGrid选中行是有自带SelectionChanged的,可是当需要重复选中同一行时,该事件就不会触发了. 后来反复查资料找到了DataGrid上有个DataGridRow. DataGrid ...

随机推荐

  1. LinuxMint装JDK和Eclipse

    Linux Mint 装JDK和Eclipse 前言 在尝试了好几个发行版后终于锁定了Linux Mint Cinnamon .那么就得配置好环境了. 这里讲一下JAVA环境,配置JDK和Eclips ...

  2. 最新Android系统版本与API等级对应关系表

    最新Android系统版本与API等级对应关系表 从Android官网拷过来的,方便查阅... 官网地址:https://developer.android.com/guide/topics/mani ...

  3. Hibernate 系列 07 - Hibernate中Java对象的三种状态

    引导目录: Hibernate 系列教程 目录 1. Java对象的三种状态 当应用通过调用Hibernate API与框架发生交互时,需要从持久化的角度关注应用对象的生命周期. 持久化声明周期是Hi ...

  4. Moq基础

    一.概念 Moq是利用诸如Linq表达式树和Lambda表达式等·NET 3.5的特性,为·NET设计和开发的Mocking库.Mock字面意思即模拟,模拟对象的行为已达到欺骗目标(待测试对象)的效果 ...

  5. Linux(Unix)时钟同步ntpd服务配置方法

    http://xu20cn.blog.51cto.com/274020/69689 假定时钟服务器IP地址为:192.168.0.1 服务器端配置: 1:置/etc/ntp.conf文件内容为: se ...

  6. java Future 接口介绍

    (转自:http://blog.csdn.net/yangyan19870319/article/details/6093481) 在Java中,如果需要设定代码执行的最长时间,即超时,可以用Java ...

  7. MySQL安装与基本配置

    一.简介 SQL语言 DDL:表.视图.索引.触发器操作等.CREATE/ALTER/DROP语句 DML:数据操作.SELECT/INSERT/UPDATE/DELETE DCL:权限设置.GRAN ...

  8. 前端小菜鸟的Mobile之旅---开篇

          背景:前段时间有幸参与了公司一个基于H5的手机APP项目,(我们用的React+ES6+Webpack+Cordova开发),由此开始接触一些关于H5开发手机APP方面的知识,下面Shar ...

  9. java中null 关键字

    Java中,null是一个关键字,用来标识一个不确定的对象.null常见意义:一.null是代表不确定的对象  Java中,null是一个关键字,用来标识一个不确定的对象.因此可以将null赋给引用类 ...

  10. split和join的用法

    第一点:split 直接举例子,比较直观, >>> f = 'www.baidu.com.cn' >>> f.split()['www.baidu.com.cn'] ...