时间:2021-07-01 10:21:17 帮助过:4人阅读
下面给大家展示效果图,喜欢的朋友可以阅读全文哦。
jqGrid本身带有search和edit表格模块,但是这些模块会使得整个插件体积显得有点庞大,而且笔者认为jqGrid的搜索查询和编辑/添加功能不好用,所以笔者放弃jqGrid自有的search和edit表格模块,借助jquery利器来完成相关功能,符合项目的实际应用。
XHTML
我们在建立一个可供查询编号和名称的两个输入框,以及“新增”和“删除”按钮,新增和删除功能在接下来的文章中会专门讲解。此外xhtml中还有一个放置表格的#list(jqGrid生成表格)以及分页条#pager。
Javascript
首先调用jqGrid,我们以本站jqGrid:强大的表格插件的应用一文中的数据为例,调用jqGrid,生成表格,请看代码和注释。
关于jqGrid相关选项设置请参照:jqGrid中文说明文档——选项设置。
此外,当我们点击“查询”按钮的时候,向后台php程序发送查询关键字请求,jqGrid根据服务端返回的结果进行响应,请看代码。
PHP
在上两段JS代码代码中,可以看到读取列表和查询业务请求的后台url地址都是do.php?action=list,后台php代码负责根据条件查询mysql数据表中的数据,并将数据以JSON格式返回给前端jqGrid,请看php代码:
值得一提的是,我们在进行中文查询时,即输入中文关键字进行查询时,需要用js进行escape编码,然后php接收中文关键字时相应的进行解码,否则会出现无法识别中文字符串的现象,本例中采用uniDecode函数进行解码,代码一并奉上:
以上所述就是本文给大家介绍的基于PHP和Mysql相结合使用jqGrid读取数据并显示的全部内容,关于jqgrid表格相关应用会持续给大家介绍,敬请关注。