JQuery DataGrid 合并标题

最新推荐文章于 2021-11-17 16:18:55 发布

原创最新推荐文章于 2021-11-17 16:18:55 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#datagrid #jquery #function #stylesheet #html #div

JQuery 专栏收录该内容

3 篇文章

订阅专栏

本文展示了如何在网页中使用jQuery EasyUI库集成数据网格(DataGrid)组件，并通过JavaScript实现各种交互操作，包括调整大小、获取选择项、进行筛选等基本功能。

页面：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
  $(function(){
   $('#test').datagrid({
    title:'My Title',
    iconCls:'icon-save',
    width:600,
    height:350,
    nowrap: false,
    striped: true,
    collapsible:true,
    url:'datagrid_data.json',
    sortName: 'code',
    sortOrder: 'desc',
    remoteSort: false,
    idField:'code',
    frozenColumns:[[
                 {field:'ck',checkbox:true},
                 {title:'code',field:'code',width:80,sortable:true}
    ]],
    columns:[[
           {title:'Base Information',colspan:3},
     {field:'opt',title:'Operation',width:100,align:'center', rowspan:2,
      formatter:function(value,rec){
       return '<span style="color:red">Edit Delete</span>';
      }
     }
    ],
    [
     {field:'name',title:'Name',width:120},
     {field:'addr',title:'Address',width:120,rowspan:2,sortable:true,
      sorter:function(a,b){
       return (a>b?1:-1);
      }
     },
     {field:'col4',title:'Col41',width:150,rowspan:2}
    ]],
    pagination:true,
    rownumbers:true,
    toolbar:[{
     id:'btnadd',
     text:'Add',
     iconCls:'icon-add',
     handler:function(){
      $('#btnsave').linkbutton('enable');
      alert('add')
     }
    },{
     id:'btncut',
     text:'Cut',
     iconCls:'icon-cut',
     handler:function(){
      $('#btnsave').linkbutton('enable');
      alert('cut')
     }
    },'-',{
     id:'btnsave',
     text:'Save',
     disabled:true,
     iconCls:'icon-save',
     handler:function(){
      $('#btnsave').linkbutton('disable');
      alert('save')
     }
    }]
   });
   var p = $('#test').datagrid('getPager');
   if (p){
    $(p).pagination({
     onBeforeRefresh:function(){
      alert('before refresh');
     }
    });
   }
  });
  function resize(){
   $('#test').datagrid('resize', {
    width:700,
    height:400
   });
  }
  function getSelected(){
   var selected = $('#test').datagrid('getSelected');
   if (selected){
    alert(selected.code+":"+selected.name+":"+selected.addr+":"+selected.col4);
   }
  }
  function getSelections(){
   var ids = [];
   var rows = $('#test').datagrid('getSelections');
   for(var i=0;i<rows.length;i++){
    ids.push(rows[i].code);
   }
   alert(ids.join(':'));
  }
  function clearSelections(){
   $('#test').datagrid('clearSelections');
  }
  function selectRow(){
   $('#test').datagrid('selectRow',2);
  }
  function selectRecord(){
   $('#test').datagrid('selectRecord','002');
  }
  function unselectRow(){
   $('#test').datagrid('unselectRow',2);
  }
  function mergeCells(){
   $('#test').datagrid('mergeCells',{
    index:2,
    field:'addr',
    rowspan:2,
    colspan:2
   });
  }
</script>
</head>
<body>
<h1>DataGrid</h1>
<div style="margin-bottom:10px;">
  <a href="#" onclick="resize()">resize</a>
  <a href="#" onclick="getSelected()">getSelected</a>
  <a href="#" onclick="getSelections()">getSelections</a>
  <a href="#" onclick="clearSelections()">clearSelections</a>
  <a href="#" onclick="selectRow()">selectRow</a>
  <a href="#" onclick="selectRecord()">selectRecord</a>
  <a href="#" onclick="unselectRow()">unselectRow</a>
  <a href="#" onclick="mergeCells()">mergeCells</a>
</div>

<table id="test"></table>

</body>
</html>