jquery_126_demo_jquery cdhjs-CSDN博客

本文链接：https://blog.csdn.net/cdhvscdhvs/article/details/37542885

<!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>Complex Layout - jQuery EasyUI Demo</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.7.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
  $(function(){
   //$("#one").show();
   //$("#two").hide();
   $('#tt3').datagrid({
    iconCls:'icon-save',
    width:600,
    height:350,
    nowrap: false,
    striped: true,
    fit: true,
    url:'datagrid_data.json',
    sortName: 'code',
    sortOrder: 'desc',
    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}
    ],[
     {field:'name',title:'Name',width:120},
     {field:'addr',title:'Address',width:120,rowspan:2,sortable:true},
     {field:'col4',title:'Col41',width:150,rowspan:2}
    ]],
    onClickCell:function(index,field,value){
     //alert(234);
     if(field == "col4")
     {

      //$(".datagrid-wrap panel-body").height(100);
      //$(".datagrid-view").height(100);
      //$(".datagrid-body").height(100);

      var t_index=parseInt(index)+1;
      $("td[field=col4]").css("color","#000000");
      $("td[field=col4]").eq(t_index).css("color","#00ffff");

     }
    }
   });
   $('#lmp_tab_2').datagrid({
    iconCls:'icon-save',
    width:600,
    height:350,
    nowrap: false,
    striped: true,
    fit: true,
    url:'datagrid_data.json',
    sortName: 'code',
    sortOrder: 'desc',
    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}
    ],[
     {field:'name',title:'Name',width:120},
     {field:'addr',title:'Address',width:120,rowspan:2,sortable:true},
     {field:'col4',title:'Col41',width:150,rowspan:2}
    ]],
    onClickCell:function(index,field,value){
     //alert(234);
     if(field == "col4")
     {

      //$(".datagrid-wrap panel-body").height(100);
      //$(".datagrid-view").height(100);
      //$(".datagrid-body").height(100);
      var t_index=parseInt(index)+1;
      $("td[field=col4]").css("color","#000000");
      $("td[field=col4]").eq(t_index).css("color","#00ffff");

     }
    }
   });

   $('#lmp_3').datagrid({
    url: 'datagrid_data2.json',
    width: 700,
    height: 300,
    fitColumns: true,
    nowrap:false,
    columns:[[
     {field:'itemid',title:'Item ID',width:80},
     {field:'productid',title:'Product ID',width:120},
     {field:'listprice',title:'List Price',width:80,align:'right',
      styler:function(value,row,index){
       if (value < 20){
        return 'background-color:#ffee00;color:red;';
       }
      }
     },
     {field:'unitcost',title:'Unit Cost',width:80,align:'right'},
     {field:'attr1',title:'Attribute',width:250},
     {field:'status',title:'Status',width:60,align:'center'}
    ]],

    onClickCell:function(index,field,value){
     //alert(234);
     if(field == "status")
     {
      $("#two").show();
      //alert(111);
      //$(".panel datagrid").height(100);
      //$(".datagrid-wrap.panel-body").height(100);
      //$(".datagrid-view").height(100);
      //$(".datagrid-view2").height(100);
      //$(".datagrid-view1").height(100);
      //panel-body panel-body-noheader panel-body-noborder
      //panel-body panel-body-noheader panel-body-noborder
      //$(".panel-body.panel-body-noheader.panel-body-noborder").height(200);
      //Tab_2
      $("#Tab_2").height(200);
      //$("#Tab_2").height(200).width(100).css('color','red');
      //$(".tabs-panels").height(200);


      //$(".datagrid-body").height(200);