php jquery grid,PHP+jqGrid表格插件实现增删改查

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

HTML

首先我们在页面上加相关按钮、生成表格#list和分页#pager。

编号：

名称：

接着我们引入jqGrid相关插件和 fancybox

查询$("#list").jqGrid({

url: 'do.php?action=list', //请求数据的url地址

datatype: "json", //请求的数据类型

colNames: ['编号', '名称', '主屏尺寸', '操作系统', '电池容量', '价格(￥)', '操作'], //数据列名称(数组)

colModel: [//数据列各参数信息设置

{name: 'sn', index: 'sn', editable: true, width: 80, align: 'center', title: false},

{name: 'title', index: 'title', width: 180, title: false},

{name: 'size', index: 'size', width: 120},

{name: 'os', index: 'os', width: 120},

{name: 'charge', index: 'charge', width: 100, align: 'center'},

{name: 'price', index: 'price', width: 80, align: 'center'},

{name: 'opt', index: 'opt', width: 80, sortable: false, align: 'center'}

],

rowNum: 10, //每页显示记录数

rowList: [10, 20, 30], //分页选项，可以下拉选择每页显示记录数

pager: '#pager', //表格数据关联的分页条，html元素

autowidth: true, //自动匹配宽度

height: 275, //设置高度

gridview: true, //加速显示

viewrecords: true, //显示总记录数

multiselect: true, //可多选，出现多选框

multiselectWidth: 25, //设置多选列宽度

sortable: true, //可以排序

sortname: 'id', //排序字段名

sortorder: "desc", //排序方式：倒序，本例中设置默认按id倒序排序

loadComplete: function(data) { //完成服务器请求后，回调函数

if (data.records == 0) { //如果没有记录返回，追加提示信息，删除按钮不可用

$("p").appendTo($("#list")).addClass("nodata").html('找不到相关数据！');

$("#del_btn").attr("disabled", true);

} else { //否则，删除提示，删除按钮可用

$("p.nodata").remove();

$("#del_btn").removeAttr("disabled");

}

}

});

$(function() {

$("#add_btn").click(function() {

$.fancybox({

'type': 'ajax',

'href': 'addGrid.html'

});

});

$("#del_btn").click(function() {

var sels = $("#list").jqGrid('getGridParam', 'selarrrow');

if (sels == "") {

alert('请选择要删除的项！')

} else {

if (confirm("您是否确认删除？")) {

$.ajax({

type: "POST",

url: "do.php?action=del",

data: "ids=" + sels,

beforeSend: function() {

$().message("正在请求...");

},

error: function() {

$().message("请求失败...");

},

success: function(msg) {

if (msg != 0) {

var arr = msg.split(',');

$.each(arr, function(i, n) {

if (arr[i] != "") {

$("#list").jqGrid('delRowData', n);

}

});

$().message("已成功删除!");

} else {

$().message("操作失败！");

}

}

});

}

}

});

$("#find_btn").click(function() {

var title = escape($("#title").val());

var sn = escape($("#sn").val());

$("#list").jqGrid('setGridParam', {

url: "do.php?action=list",

postData: {'title': title, 'sn': sn},

page: 1

}).trigger("reloadGrid");

});

});$SQL = "SELECT * FROM products WHERE deleted=0" . $where . " ORDER BY $sidx $sord LIMIT $start , $limit";

$result = mysql_query($SQL) or die("Couldn t execute query." . mysql_error());

$responce->page = $page;

$responce->total = $total_pages;

$responce->records = $count;

$i = 0;

while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {

$responce->rows[$i]['id'] = $row['id'];

$opt = "修改";

$responce->rows[$i]['cell'] = array(

$row['sn'],

$row['title'],

$row['size'],

$row['os'],

$row['charge'],

$row['price'],

$opt

);

$i++;

}

//print_r($responce);

echo json_encode($responce);新增：$(function(){

$("#add_btn").click(function(){

$.fancybox({

'type':'ajax',

'href':'addGrid.html'

});

});addGrid.html

新增产品

产品名称：

......