JQuery EasyUI(34)

Roger_CoderLife

于 2020-03-16 10:13:36 发布

阅读量156

点赞数

分类专栏： WEB - jQuery EasyUI

原文链接：https://study.163.com/course/courseMain.htm?courseId=943002

版权

WEB - jQuery EasyUI 专栏收录该内容

55 篇文章 0 订阅

订阅专栏

第三十二章： DataGrid（数据表格）组件[3]

学习要点：

样式设置

一、样式设置

DataGrid属性，扩展自Panel面板
属性名	值	说明
striped	boolean	是否显示斑马线效果，默认值为false。
nowrap	boolean	是否在一行显示所有数据。默认为true。
fitColumns	boolean	是否自动展开或收缩，已达到自适应。默认为false。
data	array,object	手工数据加载。默认为null。
loadMsg	string	从远程加载数据显示的提示信息。
rownumbers	boolean	设置true，显示一个行号。默认为false。
singleSelect	boolean	设置true，只能选定一行。默认为false。
showHeader	boolean	是否显示行头，默认为true。
showFoot	boolean	是否显示行尾，默认为true。
scrollbarsize	number	滚动条所占的高度或宽度。默认为18。
rowstyler	function	带两个参数，index索引，row对象，可以通过return返回选定行的样式。

列属性，在columns里设置的属性
属性名	值	说明
align	string	对齐列数据。有left，center，right三种。默认为null。
halign	string	对齐标题。有left，center，right三种。默认为null。
resizable	boolean	设置true，则允许改变大小。
fixed	boolean	设置true，则阻止自适应。
hidden	boolean	设置true，则隐藏列。
formatter	function	单元格格式化函数，接受三个参数：value值，row对象，index索引。
styler	function	单元格样式设定，接受三个参数：value值，row对象，index索引。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
     <table id="box"></table>   
  </body>
</html>

$(function(){

     $('#box').datagrid({
        width:400,
        height：250,
        //url:'content.json',
        //url:'user.php',
        title:'用户列表',
        iconCls:'icon-search',
        striped:true,
        nowrap:true,
        fitColumns:true,
        loadMsg:'努力展开中……',
        rownumbers:true,
        singleSelect:true,
        showHeader:true,
        showFooter:true,
        scrollbarSize：30,
        rowStyler:function(index,row){
           if(row.user == '李炎恢'){
            //这里返回的也可以是CSS的class名称。
            return 'background-color:orange',
         }
       },
        columns:[[
             {
               field:'user',
               title:'账号',
               sortable:true,
               //width:100,
               //fixed:true,
               //algin:'center',
               //halgin:'center',
               resizable:false,
               //hidden:true,
               formatter:function(value,row,index){
                    //return value,
                    return '[' + value + ']';
                    console.log(value);
               },
               styler:function(value,row,index){
                  if(value == '李炎恢'){
                      return 'background-color:orange';
                 };
               },
             },
             {
               field:'email',
               title:'邮箱',
               sortable:true,
               //sorter:function(a,b){
                //console.log('a' +'|'+ 'b');
               //},
             },
             {
               field:'date',
               title:'注册时间',
               sortable:true,
             },
      ]],

        data:[
          {
           user:'手工用户',
           email:'手工邮箱',
           date:'2014-10-11',
           },
         ],
        pagination:true,
        pageSize:5,
        pageList:[5,10,15],
        pageNumber:1,
        pagePosition:'top',
        pagePosition:'both',
        pagePosition:'bottom',
        sortName:'date',
        sortOrder:'DESC',
        remoteSort:false,
        //multiSort:true,
        //method:'get',
        queryParam:{
          id:1,
         },
   });
});

[
  {
   "user":"蜡笔小新",
   "emial":"xiaoxin@163.com",
   "date":"2014-10-01",
  },
  {
   "user":"樱桃小丸子",
   "emial":"xiaowanzi@163.com",
   "date":"2014-10-02",
  },
  {
   "user":"黑崎一护",
   "emial":"yihu@163.com",
   "date":"2014-10-03",
  },
]

<?php
   header('Content-Type:text/html;chartset=utf-8');
   define('DB_HOST','localhost');
   define('DB_USER','root');
   define('DB_PWD','123456');
   define('DB_NAME','thinkphp');    

  $conn = @mysql_connect(DB_HOST,DB_USER,DB_PWD)or die('数据库连接失败：'.mysql_error());

  @mysql_select_db(DB_NAME)or die('数据库错误：'.mysql_error());

  @mysql_query('SET NMAES UTF8')or die('字符集错误：'.mysql_error());
?>

<?php
   require 'config.hph';

   $page = $_POST['page'];
   $pageSize = $_POST['row'];
   $first = $pageSize * ($page - 1);

   $order = $_POST['order'];
   $sort = $_POST['sort'];

   $query = mysql_query("SELECT user,email,data FROM think_user ORDER BY $order $sort LIMIT $first,$pageSize") or die('SQL 错误！');
   
   $json ='';

   while (!!$row = mysql_fetch_array($query,MYSQL_ASSOC)){
      $json .= json_encode($row).',';
    }
   
   $total = mysql_num_rows(mysql_query("SELECT user,email,data FROM think_user"));
   
   echo '{"total":'.$total.',"rows":['.$json.'],"footer":[{"user":"统计","email":"统计","date":"统计"}]}'; 

   $json  = substr($json,0,-1);

   mysql_close();
?>

作者：Roger_CoderLife

链接：https://blog.csdn.net/Roger_CoderLife/article/details/103088415

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载

Roger_CoderLife

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery EasyUI(34)

第三十二章： DataGrid（数据表格）组件[3]学习要点：样式设置一、样式设置DataGrid属性，扩展自Panel面板属性名值说明 striped boolean 是否显示斑马线效果，默认值为false。 nowrap boolean 是否在一行显示所有数据。默认为true。...
复制链接

扫一扫