<!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系统分析（二）Mach-O二进制文件解析

    ➠更多技术干货请戳:听云博客 0x01  Mach-O格式简单介绍 Mach-O文件格式是 OS X 与 iOS 系统上的可执行文件格式,类似于windows的 PE 文件 与 Linux(其他 Un ...

  2. Java 计算年份，月份，剩余天数

    实现很简单,两者时间进行比较...具体看下面代码! package com.text; import java.text.ParseException; import java.text.Simple ...

  3. vim的高亮查找操作

    使用了VIM这么久,却一直无法牢记一些基本的操作指令.今天查找一个关键字时,想不起来怎么查找“下一个”,于是google之并解决,顺便把有用的都贴过来罢. 查找指令:/xxx 往下查找?xxx 往上  ...

  4. MVC @Html.TextBoxFor 格式化

    不能使用Html.EditorFor() 因为需要为生成的控件 指定HTML特性 @Html.TextBoxFor(model => model.StartDate, new { Value = ...

  5. 使用rsync同步目录

    本文描述了linux下使用rsync单向同步两个机器目录的问题. 使用rsync同步后可以保持目录的一致性(含删除操作). 数据同步方式 从主机拉数据 备机上启动的流程 同步命令: rsync -av ...

  6. ORA-00600 3020 ORA-10567案例

    PlateSpin克隆复制出的Oracle数据库服务器,往往启动数据库实例都会遇到一些杂七杂八的问题.今天测试DR环境时又遇到了一个特殊场景,在此之前,我已经遇到了下面两起案例: ORA-00600: ...

  7. MySQL Performance-Schema(二) 理论篇

    MySQL Performance-Schema中总共包含52个表,主要分为几类:Setup表,Instance表,Wait Event表,Stage Event表Statement Event表,C ...

  8. iOS实现渐变色背景（两种方式实现）

    之前做过类似的功能,现在记录一下,来来来... 效果图: 说明=========================== 方法1: 说明:无返回值 用法:直接调用方法.原理是在view的layer层添加. ...

  9. Mellanox 8亿美元收购EZchip

    http://www.iccsz.com/site/cn/News/2015/10/08/20151008003916131771.htm Mellanox 8亿美元收购EZchip 目标电信运营商 ...

  10. 使用Node.js+Socket.IO搭建WebSocket实时应用

    Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...