Konsep CardView Grid Easyui dengan php Mysql

Bismillahirrahmanirrahim…

cardview adalah tampilan datagrid yang disertai dengan gambar yang tampilanya menyerupai profile seseorang tapi dalam tampilan grid..

langsung saja siapkan databases

db

langsunng masuk ke code programnya

1.index.php


<!doctype html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <meta name="keywords" content="jquery,ui,easy,easyui,web">
 <meta name="description" content="easyui help you build your web page easily!">
 <title>DataGrid Card View - jQuery EasyUI Demo</title>
 <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
 <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
 <link rel="stylesheet" type="text/css" href="easyui/demo/demo.css">
 <script type="text/javascript" src="easyui/jquery.min.js"></script>
 <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
</head>
<body>
 <h2>DataGrid Card View Demo</h2>
 <div class="demo-info" style="margin-bottom:10px">
 <div class="demo-tip icon-tip">&nbsp;</div>
 <div>The datagrid row can be showed as card.</div>
 </div>

 <table id="tt" style="width:700px;height:350px"
 title="DataGrid - CardView" singleSelect="true" fitColumns="true" remoteSort="false"
 url="data.php" pagination="true" sortOrder="desc" sortName="id">
 <thead>
 <tr>
 <th field="id" width="80" sortable="true">Item ID</th>
 <th field="foto" width="120" sortable="true">List Price</th>

 </tr>
 </thead>
 </table>
 <script>
 var cardview = $.extend({}, $.fn.datagrid.defaults.view, {
 renderRow: function(target, fields, frozen, rowIndex, rowData){
 var cc = [];
 cc.push('<td colspan=' + fields.length + ' style="padding:10px 5px;border:0;">');
 if (!frozen){
 var aa = rowData.id;
 var img = rowData.foto;
 cc.push('<img src="img/' + img + '" style="width:150px;float:left">');
 cc.push('<div style="float:left;margin-left:20px;">');
 for(var i=0; i<fields.length; i++){
 var copts = $(target).datagrid('getColumnOption', fields[i]);
 cc.push('<p><span class="c-label">' + copts.title + ':</span> ' + rowData[fields[i]] + '</p>');
 }
 cc.push('</div>');
 }
 cc.push('</td>');
 return cc.join('');
 }
 });
 $(function(){
 $('#tt').datagrid({
 view: cardview
 });
 });
 </script>
 <style type="text/css">
 .c-label{
 display:inline-block;
 width:100px;
 font-weight:bold;
 }
 </style>
</body>

2. json .php


<?php

$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
 $rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
 $sort = isset($_POST['sort']) ? strval($_POST['sort']) : 'id';
 $order = isset($_POST['order']) ? strval($_POST['order']) : 'asc';
 $offset = ($page-1)*$rows;

 $result = array();

 mysql_connect("localhost","root","");
 mysql_select_db("easyui");

 $rs = mysql_query("select count(*) from grid");
 $row = mysql_fetch_row($rs);
 $result["total"] = $row[0];

 $rs = mysql_query("select * from grid order by $sort $order limit $offset,$rows");

 $items = array();
 while($row = mysql_fetch_object($rs)){
 array_push($items, $row);
 }
 $result["rows"] = $items;

 echo json_encode($result);

?>

hasil seperti ini

hasilcard

link download disini

Previous Post
Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: