JQuery UI Flexgrid 表格应用

最新推荐文章于 2022-08-01 22:47:25 发布

mumuzhu2011

最新推荐文章于 2022-08-01 22:47:25 发布

阅读量5.2k

点赞数

分类专栏： JSON jQuery 文章标签： jquery ui json delete function xhtml

本文链接：https://blog.csdn.net/mumuzhu2011/article/details/7178218

版权

jQuery 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

JSON

2 篇文章 0 订阅

订阅专栏

JQuery UI flexgrid 应用

本实例利用Jquery Ui Flexgrid插件来实现如下图的表格功能：

一、首先导入必要的JS文件和Css文件：

二、客户端实现：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Flexigrid</title>

$(document).ready(function () {

$("#flex1").flexigrid

(

{

url: 'datapage.aspx',

dataType: 'json',

colModel: [

{display: 'ID', name: 'id',width: 40, sortable: true, align: 'center' },

{display: 'ISO', name: 'iso', width: 40, sortable: true,align: 'center' },

{display: 'Name', name: 'name', width: 180, sortable: true, align: 'left'},

{display: 'Printable Name', name: 'printable_name', width: 120, sortable: true, align: 'left'},

{display: 'ISO3', name: 'iso3', width: 130, sortable: true, align: 'left',hide: true },

{display: 'Number Code', name: 'numcode', width: 80, sortable: true, align: 'right'}

buttons: [

{name: 'Add', bclass: 'add',onpress: test }, //添加一条记录时执行test函

{name:'Delete', bclass: 'delete',onpress: test }, //删一条记录时执行test函数

{separator:true },

{name: 'A', onpress: sortAlpha },

{name: 'B', onpress: sortAlpha },

{name: 'C', onpress: sortAlpha },

{name: 'D', onpress: sortAlpha },

{name: 'E', onpress: sortAlpha },

{name: 'F', onpress: sortAlpha },

{name: 'G', onpress: sortAlpha },

{name: 'H', onpress: sortAlpha },

{name: 'I', onpress: sortAlpha },

{name: 'J', onpress: sortAlpha },

{name: 'K', onpress: sortAlpha },

{name: 'L', onpress: sortAlpha },

{name: 'M', onpress: sortAlpha },

{name: 'N', onpress: sortAlpha },

{name: 'O', onpress: sortAlpha },

{name: 'P', onpress: sortAlpha },

{name: 'Q', onpress: sortAlpha },

{name: 'R', onpress: sortAlpha },

{name: 'S', onpress: sortAlpha },

{name: 'T', onpress: sortAlpha },

{name: 'U', onpress: sortAlpha },

{name: 'V', onpress: sortAlpha },

{name: 'W', onpress: sortAlpha },

{name: 'X', onpress: sortAlpha },

{name: 'Y', onpress: sortAlpha },

{name: 'Z', onpress: sortAlpha },

{name: '#', onpress: sortAlpha }

searchitems: [

{display: 'ISO', name: 'iso' },

{display: 'Name', name: 'name', isdefault: true}

sortname: "id",

sortorder: "asc",

usepager: true,

title: 'Countries',

useRp: true,

rp: 10,

showTableToggleBtn: true,

width: 700,

height: 255

}

);

});

function sortAlpha(com) {

jQuery('#flex1').flexOptions({ newp: 1, params: [{ name: 'letter_pressed', value: com }, { name: 'qtype', value: $('select[name=qtype]').val()}]});

jQuery("#flex1").flexReload();

}

function test(com, grid) {

if (com == 'Delete'){

alert('删除一条新记录');//此处省略

}

else if (com == 'Add') {

alert('添加一条新记录'); //此处省略

}

</script>

</head>

<body>

<h1>

FlexigridExample Page</h1>

<br />

<b>Demonstrating the flexgrid with search anddeletefunctionality</b><br />

<br />

</table>

<br />

</body>

</html>

三、服务器端实现：

Datapage.aspx文件

<%@ PageLanguage="C#"%>

stringjson;

json = "";

json += "{\n";

json += "page:" + 10 + ",\n";

json += "total:" + 10 + ",\n";

json += "rows:[";

bool rc = false;

//这里只是模拟了一些数据，实际应该从数据库查询或其它方式获取数据

for (int i = 0; i <= 20; i++)

{

if (rc)json += ",";

json += "\n{";

json += "id:'id"+ i + "',";

json += "cell:['id"+ i + "','iso" + i + "'";

json += ",'name"+ i + "'";

json += ",'printable_name"+ i + "'";

json += ",'iso3"+ i + "'";

json += ",'numcode"+ i + "']";

json += "}";

rc = true;

}

json += "]\n";

json += "}";

Response.Write(json);

本实例只是简单演示了生成表格，对于表格的其它操作并没有实现，您可以根据自己的需要进行添加，本文希望能起到一个抛砖引玉的作用。

mumuzhu2011

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery UI Flexgrid 表格应用

JQuery UI flexgrid 应用本实例利用Jquery Ui Flexgrid插件来实现如下图的表格功能：一、首先导入必要的JS文件和Css文件：二、客户端实现： Flexigrid $(document).ready(function () {
复制链接

扫一扫

专栏目录