jsgrid 和 grid 两种加easyui的方法

最新推荐文章于 2021-03-19 22:36:48 发布

根子的数据库

最新推荐文章于 2021-03-19 22:36:48 发布

阅读量829

点赞数

分类专栏： easyui

本文链接：https://blog.csdn.net/genziisme/article/details/45250897

版权

easyui 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一:jsgrid.php

<?php require_once 'common.php'?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic DataGrid - 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">
<script type="text/javascript" src="/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
</head>
<body>

<table id="list_data" cellspacing="0" cellpadding="0"></table>

<script type="text/javascript">
$('#list_data').datagrid({
title: '列表',
iconCls:'icon-edit',
border: true,
height: 'auto',
nowrap: false,
striped: true,
collapsible:false,
fit: true,
remoteSort:false,
idField:'fldId',
singleSelect:true,//是否单选
pageSize:<?php echo $pageSize?>,
pageList :[<?php echo $pageSize?>,<?php echo $pageSize * 2?>,<?php echo $pageSize * 3?>],
pagination:true,//分页控件
rownumbers:true,//行号
url:'json.php',
columns:[[
{
field:'id',
title:'dddddd',
width:500
},
{
field:'city',
title:'ddddddd',
width:100
},
{
field:'username',
title:'是否显示',
width:80
}

]],
toolbar: [
{
text: '添加',
iconCls: 'icon-add',//iconClass
handler: function() {
location.href = '/nba/form.php';
}
}
, '-', {
text: '修改',
iconCls: 'icon-edit',
handler: function() {
var row = $('#list_data').datagrid('getSelected');
if (row){
location.href = '/nba/form.php?id='+row.id;
} else {
$.messager.alert('警告','请选择您要编辑的行。');
}
}
}, '-', {
text: '删除',
iconCls: 'icon-remove',
handler: function() {
var row = $('#list_data').datagrid('getSelected');
if (row){
$.messager.confirm('警告', '您确认要删除该记录么？', function(r){
if (r){
location.href = '/adminmanager/' + _controller + '/destroy/id/' + row.b_id + '?category=' + '<?php echo isset($_GET['category']) ? urlencode($_GET['category']) : ''?>';
}
});
} else {
$.messager.alert('警告','请选择您要编辑的行。');
}
}
}]
});
</script>
</body>
</html>

二.grid

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic DataGrid - 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">
<script type="text/javascript" src="/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
</head>
<body>

<div id="toolbar">
<a href="add.php" class="easyui-linkbutton easyui-tooltip" title="Add" data-options="iconCls:'icon-add',plain:true"></a>
<a href="#" class="easyui-linkbutton easyui-tooltip" title="Cut" data-options="iconCls:'icon-cut',plain:true"></a>
<a href="#" class="easyui-linkbutton easyui-tooltip" title="Remove" data-options="iconCls:'icon-remove',plain:true"></a>
<a href="#" class="easyui-linkbutton easyui-tooltip" title="Undo" data-options="iconCls:'icon-undo',plain:true"></a>
<a href="#" class="easyui-linkbutton easyui-tooltip" title="Redo" data-options="iconCls:'icon-redo',plain:true"></a>
</div>
<table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
data-options="
rownumbers:true,
singleSelect:true,
autoRowHeight:false,
pagination:true,
pageSize:10,
url:'json.php'">
<thead>

<th field="itemid" width="80">name1</th>
<th field="productid" width="100">name2</th>
<th field="listprice" width="80" >Name3</th>
<th field="unitcost" width="80" align="right">name4</th>

</thead>
</table>

</body>
</html>