<!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. iOS 获取设备唯一标示符的方法

    在开发中会遇到应用需要记录设备标示,即使应用卸载后再安装也可重新识别的情况,在这写一种实现方式--读取设备的UUID(Universally Unique Identifier)并通过KeyChain ...

  2. Linux2.6内核进程调度系列--scheduler_tick()函数3.更新普通进程的时间片

    RT /** * 运行到此,说明进程是普通进程.现在开始更新普通进程的时间片. */ /* 首先递减普通进程的时间片计数器.如果用完,继续执行以下操作 */ if (!--p->time_sli ...

  3. Undefined symbols for architecture arm64解决方案

    在iOS开发中经常遇到的一个错误是Undefined symbols for architecture arm64,这个错误表示工程某些地方不支持arm64指令集.那我们应该怎么解决这个问题了?我们不 ...

  4. android版扫扫图书应用源码

    书,是人类的灵魂. 扫扫图书是一个让你懂得如何去选择一本书的APP. 这里你可以扫描条形码查询图书, 你也可以关键字搜索,遇到合乎你口味的书, 你还可以看看别人的读书笔记,不同角度去体会. 注:请允许 ...

  5. 读《乔布斯的NeXT和苹果之间，隔了这两个创业常识》

    原文链接:http://wwww.huxiu.com/article/114950/1.html 前言: 当今硅谷风头最劲的风险投资家马克·安德森曾说,硅谷每年大约诞生15-20家真正值得投资的公司. ...

  6. Visual Studio 中 Build 和 Rebuild 的区别

    因为之前写的程序比较小,编译起来比较快,所以一直都没有太在意 Build 和 Rebuild 之间的区别,后来发现两个还是有很大不同. Build 只针对在上次编译之后更改过的文件进行编译,在项目比较 ...

  7. iOS系列 基础篇 09 开关、滑块和分段控件

    iOS系列 基础篇 09 开关.滑块和分段控件 目录: 案例说明 开关控件Switch 滑块控件Slider 分段控件Segmented Control 1. 案例说明 开关控件(Switch).滑块 ...

  8. Oracle计算两个时间戳相差秒数，精确到毫秒

    with t as (select to_timestamp('2015-01-01 11:13:15.023456', 'yyyy-mm-dd hh24:mi:ss.ff9') t1, to_tim ...

  9. RHEL6.3系统安装

      进入安装界面   这里选择跳过   点击下一步   选择安装语言     选择键盘   选择系统储存方式   选择是否格式化储存设备     给安装的系统一个计算机名     选择时区   给ro ...

  10. Unity性能优化（3）-官方教程Optimizing garbage collection in Unity games翻译

    本文是Unity官方教程,性能优化系列的第三篇<Optimizing garbage collection in Unity games>的翻译. 相关文章: Unity性能优化(1)-官 ...