<!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通知的整理笔记

    iOS通知用于高耦合界面的传值确实方便快捷. 需要实现模态弹出的视图控制器上,有一个视图控制器可以导航.这必定要将这个视图控制器的导航视图控制器naVC.view添加到模态弹出的视图控制器presen ...

  2. backup log is terminating abnormally because for write on file failed: 112(error not found)

    昨天遇到一个案例,YourSQLDba做事务日志备份时失败,检查YourSQLDba输出的错误信息如下: <Exec> <ctx>yMaint.backups</ctx& ...

  3. [AlwaysOn Availability Groups]AG排查和监控指南

    AG排查和监控指南 1. 排查场景 如下表包含了常用排查的场景.根据被分为几个场景类型,比如Configuration,client connectivity,failover和performance ...

  4. Intel 推出 DPDK 开发包的意义是什么？

    Intel 推出 DPDK 开发包的意义是什么? http://www.zhihu.com/question/27413080?sort=created 基于intel dpdk的包处理器,相较于基于 ...

  5. IIS 启用CORS ，IISExpress 通过IP 访问

      在IIS 10中启用CORS: <system.webServer> <handlers> <remove name="OPTIONSVerbHandler ...

  6. git submodule初用

    git submodule主要是用于针对git项目中还存在git子模块的情况.在一般情况下,我们通过git clone 获取项目的时候会把项目中的所有信息都拿到.但是,如果相关中存在git子模块那么, ...

  7. Servlet过滤器

    Servlet过滤器 [TOC] 1.过滤器的基本概念 1.1.基本概念 过滤器(Filter)属于tomcat服务器中的Servlet功能.在普通的javaweb服务中,jsp中的请求要被Servl ...

  8. 【IDEA】intellij idea 插件推荐

    CSDN 2016博客之星评选结果公布    [系列直播]零基础学习微信小程序!      "我的2016"主题征文活动   博客的神秘功能 [IDEA]intellij idea ...

  9. HTML5 & 三年二班周杰伦

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. [LeetCode] Bulls and Cows 公母牛游戏

    You are playing the following Bulls and Cows game with your friend: You write a 4-digit secret numbe ...