<!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 UIWebView自定义Alert风格的弹框

    之前开发过一个App,因为公司之前写好了网页版的内容和安卓版本的App,我进去后老板要求我ios直接用网页的内容,而不需要自己再搭建框架.我一听,偷笑了,这不就是一个UIWebView吗?简单! 但是 ...

  2. Android中隐藏顶部状态栏的那些坑——Android开发之路3

    Android中隐藏顶部状态栏的那些坑 先看看常规的隐藏状态栏的方法: 方法一: @Override protected void onCreate(Bundle savedInstanceState ...

  3. (十五)使用Nexus创建Maven私服

    通过建立自己的私服,就可以降低中央仓库负荷.节省外网宽带.加速Maven构建.自己部署构件等,从而高效的使用Maven.有三种专门的Maven仓库管理软件可以用来帮助大家建立私服:Apache基金会的 ...

  4. [Erlang 0109] From Elixir to Erlang Code

    Elixir代码最终编译成为erlang代码,这个过程是怎样的?本文通过一个小测试做下探索.         编译一旦完成,你就看到了真相   Elixir代码组织方式一方面和Erlang一样才用非常 ...

  5. python列表模拟堆栈和队列

    对列特点:先进先出.后进后出 用列表insert.pop模拟进队出队: >>> l = [] >>> l.insert(0,'p1') >>> l ...

  6. 浏览器js与css文件有缓存未更新致最新版本

    这是由于编码人员频繁更改引入的资源文件,浏览器中存在缓存,当你清空浏览器缓存也无济于事时可以采用在资源文件尾部加?_MM(MM为随机参数)即可强制更新资源文件.

  7. tomcat安装后，本地可以访问，远程不能访问

    问题描述:tomcat安装后,在本地可以使用本地IP地址.localhost可以访问,但是在远程却不能访问. 使用工具:无. 解决方法:关闭服务器端的"公用网络防火墙"即可.

  8. [jquery]if条件句

    //写个网页用了多门语言,脑袋转不过来亚! //代码: if(){} else if(){} else {}

  9. 1877: [SDOI2009]晨跑

    1877: [SDOI2009]晨跑 Time Limit: 4 Sec  Memory Limit: 64 MBSubmit: 2007  Solved: 1085[Submit][Status][ ...

  10. LA 3231 - Fair Share

    You are given N processors and M jobs to be processed. Two processors are specified to each job. To ...