zoukankan      html  css  js  c++  java

  • datagrid实现行的上移和下移（转）

    [html] view plain copy
     print?
    1. <html>  
    2. <head>  
    3.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    4.     <meta name="keywords" content="jquery,ui,easy,easyui,web">  
    5.     <meta name="description" content="easyui help you build your web page easily!">  
    6.     <title>jQuery EasyUI Demo</title>  
    7.     <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">  
    8.     <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">  
    9.     <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>  
    10.     <script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>  
    11.     <script>  
    12.         function getSelected(){  
    13.             var row = $('#tt').datagrid('getSelected');  
    14.             if (row){  
    15.                 alert('Item ID:'+row.itemid+" Price:"+row.listprice);  
    16.             }  
    17.         }  
    18.         function getSelections(){  
    19.             var ids = [];  
    20.             var rows = $('#tt').datagrid('getSelections');  
    21.             for(var i=0; i<rows.length; i++){  
    22.                 ids.push(rows[i].itemid);  
    23.             }  
    24.             alert(ids.join(' '));  
    25.         }  
    26.           
    27.         function upRow(){  
    28.             var row = $('#tt').datagrid('getSelected');  
    29.             var rowindex = $('#tt').datagrid('getRowIndex',row);  
    30.             //alert(rowindex);  
    31.             if(rowindex === 0) {return; }  
    32.             $('#tt').datagrid('insertRow',{index:rowindex-1,row});  
    33.             $('#tt').datagrid('deleteRow',rowindex+1);  
    34.         }  
    35.         function allRows(){  
    36.             var rows = $('#tt').datagrid('getRows');  
    37.             alert(rows.length);  
    38.             for(var i=0; i<rows.length; i++){  
    39.                 alert(rows[i].itemid);  
    40.             }  
    41.         }  
    42.     </script>  
    43. </head>  
    44. <body>  
    45.     <h1>DataGrid</h1>  
    46.     <div style="margin-bottom:20px">  
    47.         <a href="#" onclick="getSelected()">GetSelected</a>  
    48.         <a href="#" onclick="getSelections()">GetSelections</a>  
    49.         <a href="#" onclick="upRow()">upRow</a>  
    50.         <a href="#" onclick="allRows()">all rows</a>  
    51.     </div>  
    52.     <table id="tt" class="easyui-datagrid" style="600px;height:250px"  
    53.             url="data/datagrid_data.json"  
    54.             data-options="singleSelect:true"  
    55.             title="Load Data" iconCls="icon-save" fitColumns="true">  
    56.         <thead>  
    57.             <tr>  
    58.                 <th field="itemid" width="80">Item ID</th>  
    59.                 <th field="productid" width="80">Product ID</th>  
    60.                 <th field="listprice" width="80" align="right">List Price</th>  
    61.                 <th field="unitcost" width="80" align="right">Unit Cost</th>  
    62.                 <th field="attr1" width="150">Attribute</th>  
    63.                 <th field="status" width="60" align="center">Stauts</th>  
    64.             </tr>  
    65.         </thead>  
    66.     </table>  
    67. </body>  
    68. </html>  

    [html] view plain copy
     print?
    1. data-options="singleSelect:true"  
    实现单行选择.

    参考数据:

    [javascript] view plain copy
     print?
    1. {"total":28,"rows":[  
    2.     {"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":16.50,"attr1":"Large","itemid":"EST-1"},  
    3.     {"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},  
    4.     {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Venomless","itemid":"EST-11"},  
    5.     {"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":193.50,"attr1":"Adult Male","itemid":"EST-18"}  
    6. ]}  

    下移同理.
  • 相关阅读:
    pl/sql配置-本地不安装oracle-登录pl/sql
    js中查看js对象的属性
    eos中nui提交表单
    Window clearTimeout() 方法与setTimeout
    小程序---app.json文件的配置，全局的，对所有页面都适用
    css--加载中样式
    Vue+axios请求本地json
    vue中通过方法返回data中的对象是这个{__ob__: Observer},怎么处理 呢？？？
    解决 canvas 绘图在高清屏中的模糊问题
    总结：活动类开发必知必会
  • 原文地址：https://www.cnblogs.com/jpfss/p/7381882.html
Copyright © 2011-2022 走看看