<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&jQuery EasyUI插件使用之datagrid的tab页面和行内编辑功能的整合
jQuery EasyUI插件使用之datagrid的tab页面和行内编辑功能的整合
[摘要：1、 正在应用easyui插件的时间，发明datagrid的民圆（ /） demo皆是针对某一个功效去举行讲授 比方我们最经常使用的 datagrid的form编纂功效简直出提到 不外呢，正在民网demo主页的]
在使用easyui插件的时候，发现datagrid的官方（/）demo都是针对某一个功能来进行讲解
比如我们最常用的datagrid的form编辑功能几乎没提到
不过呢，在官网demo主页的第一个例子，就是Application下的&Basic CRUD Application 就是一个form编辑的案例
需要自己创建一个dialog来做form的提交
而datagrid的行编辑功能在datagrid的例子Row Editing in DataGrid里面
也讲的比较完整了，只是缺少了和服务器端交互的部分
使用了多个表格插件之后，个人觉得jqGrid这个插件相对来说是比较强大的（/blog/）
不论是行编辑还是form编辑，而且各种配置参数也是非常详尽，开发者能想到的几乎都涵盖了进去
三、现状是
使用easyui插件开发了一个网站，左侧是菜单，点击不同的菜单，在主页面就显示一个tab页面
而每个tab页面里边都有一个有待管理的datagrid，datagrid的编辑方式采用行编辑模式
此时如果照着官网的demo来为每个tab页面的datagrid写代码，显然有太多的重复工作
并且，由于多个tab页面添加进来以后，实际是都是在同一个页面上显示，还需要考虑每个datagrid之间不能有代码冲突的问题
例如，官网的行编辑例子里面第一句代码&
var editIndex = undefined;
定义的当前编辑行行号，这个就必须为每一个datagrid定义一个不同的变量
好，为了解决这些问题，在官网例子的基础上，开始改造一个更通用的代码
四、准备工作
首先主页的的样式和用到的js文件，需要引入
themes/default/easyui.css
themes/icon.css
jquery-1.10.2.min.js
jquery-migrate-1.2.1.min.js
jquery.json-2.4.min.js
jquery.easyui.min.js
locale/easyui-lang-zh_CN.js
其中用到的json插件，主页/p/jquery-json/
用于把javascript对象转换成json字符串，用法就是$.toJSON(object);
方便于传递给服务器端
为了提供好的用户体验，在点击了保存按钮时，显示一个“正在保存”的提示，并且阻止用户多次提交
我们在主页面上放上一个window（从官方demo里面拿来修改了一点点）
等待保存时显示出来
&div id="w" class="easyui-window" title="请稍候..."
&&&&data-options="modal:true,closed:true,closable:false,minimizable:false,maximizable:false,iconCls:'icon-save'"
&&&&style="width:200height:80padding:10"&
&&&&&&&&保存中，请不要刷新页面
五、开始修改官方代码
胡乱新建一个js文件，就叫什么easyui-row-edit.js吧
1、 修改 var&editIndex =
// 定义一个全局对象，存放不同tab页面中各个datagrid对应的当前行号
// 而下面的所有方法，都加了一个参数： indexKey ，每个datagrid取一个唯一的key传进来即可
// 例如，菜单管理传入参数'menu'，代码管理传入参数'code'
// 这样 editIndex = { menu: 10, code: 15 } 就能清晰地分别开每个datagrid当前行了
var editIndex = {};
2、 修改 function&endEditing
// 判断目前在编辑的行是否可结束编辑
// 主要是对各输入字段的校验（字段的校验规则在初始化datagrid时指定）
// parameters: datagridId（datagrid的id，例如'#dg'，注意前面加星号）
indexKey (该datagrid当前编辑行在对象editIndex中的key)
// return: 通过校验返回true，否则false
// 本方法提供给以下其他方法调用
function endEditing( datagridId, indexKey ){
&&&&console.log(editIndex);
&&&&if (editIndex[indexKey] == undefined){return true;}&&&&// 当前没有编辑的行直接返回true
&&&&if ($(datagridId).datagrid('validateRow', editIndex[indexKey])){ //校验通过
&&&&&&&&$(datagridId).datagrid('endEdit', editIndex[indexKey]);&&&&&&&&// 完成编辑
&&&&&&&&editIndex[indexKey] = undefined;
&&&&&&&&return true;
&&&&} else {
&&&&&&&&return false;&&&&&&&&//未通过校验
3、修改function&onClickRow
// 点击数据行的时候所做的操作
// parameters: datagridId（datagrid的id，例如'#dg'，注意前面加星号）
index: 当前点击的行
indexKey (该datagrid当前编辑行在对象editIndex中的key)
// 使用方法：
$('#dgCode').datagrid({
//onClickRow: function(index){
onClickRow('#dgCode', index ,'code');
function onClickRow(datagridId, index, indexKey){
&&&&if (editIndex[indexKey] != index){&&&&// 点击的行和当前编辑的行不一样时
&&&&&&&&if (endEditing( datagridId, indexKey )){&&&&// 当前编辑的行可结束编辑时
&&&&&&&&&&&&$(datagridId).datagrid('selectRow', index) // 选中当前点击行
&&&&&&&&&&&&&&&&&&&&.datagrid('beginEdit', index);&&&& // 并开始编辑
&&&&&&&&&&&&editIndex[indexKey] = index;&&&&&&&&&&&&&&&&&&&&&&&&&&&&// 当前编辑行变成点击的行
&&&&&&&&} else {&&&&// 当前编辑行不可结束
&&&&&&&&&&&&$(datagridId).datagrid('selectRow', editIndex[indexKey]); // 继续留在当前编辑的行
4、修改 function&append
// parameters: datagridId（datagrid的id，例如'#dg'，注意前面加星号）
indexKey (该datagrid当前编辑行在对象editIndex中的key)
// 使用方法： 点击新增按钮时调用
// 例如: &a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append('#dgCode','code');"&新增
function append( datagridId ,indexKey ){
&&&&if (endEditing( datagridId, indexKey )){ // 首先还是要判断是否能结束当前编辑行
&&&&&&&&$(datagridId).datagrid('appendRow',{ /*status:'P'*/}); &&&&// 新增一行再最后
&&&&&&&&editIndex[indexKey] = $(datagridId).datagrid('getRows').length-1;
&&&&&&&&$(datagridId).datagrid('selectRow', editIndex[indexKey]) &&&&// 并选中新增的行
&&&&&&&&&&&&&&&&.datagrid('beginEdit', editIndex[indexKey]); // 并开始编辑
5、修改function&removeit
// parameters: datagridId（datagrid的id，例如'#dg'，注意前面加星号）
indexKey (该datagrid当前编辑行在对象editIndex中的key)
// 使用方法： 点击删除按钮时调用
// 例如: &a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit('#dgCode','code');"&删除
function removeit( datagridId, indexKey ){
&&&&if (editIndex[indexKey] == undefined){ return; } // 当前没有选中行，什么也不做，直接返回
&&&&$( datagridId ).datagrid('cancelEdit', editIndex[indexKey]) // 取消当前编辑行的编辑
&&&&&&&&&&&&.datagrid('deleteRow', editIndex[indexKey]); // 并删除当前行
&&&&editIndex[indexKey] = undefined;
6、修改function&accept
// 保存更改
// parameters: datagridId（datagrid的id，例如'#dg'，注意前面加星号）
indexKey (该datagrid当前编辑行在对象editIndex中的key)
url ( 保存的url )
ids 主键字段(可选)
考虑到数据行数据量可能较大，当删除的时候，其实服务器端只需要知道主键即可
//&&&&&&&&&&&&&&&&
为了减轻网络压力，前端只传递删除的主键数组即可
1、单主键的情况，参数传入字符串,例如是'id'，此时传递到服务器端的就是一个id数组：['44445','4444','3333','1002']或者['usera','userb','userc','userd']
2、组合字段做主键时，参数传入数组，例如['userid','mobile']，传递到服务器端的就是一个对象数组:[{userid:'usera',mobile:'135'},{userid:'userb',mobile:'136'}]
3、不传入参数，或者传入任何返回false的表达式，删除数据依然把整条数据传递给服务器端
// 使用方法： 点击保存按钮时调用
// 例如: &a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept('#dgCode','code','&?=base_url();?&manager/system/commit_code','id');"&保存
function accept( datagridId, indexKey, url, ids ){
&&&&// 还是先判断是否可结束编辑才能继续保存
&&&&if ( !endEditing( datagridId , indexKey) ) return;
&&&&// 判断一下，没有更改，则不用保存
&&&&if ( $(datagridId).datagrid('getChanges').length === 0 ) return;
&&&&// 分别获得新增行、删除行、更改行的数据&&&&
&&&&var inserted = $( datagridId ).datagrid('getChanges','inserted');
&&&&var deleted = $( datagridId ).datagrid('getChanges','deleted');
&&&&var updated = $( datagridId ).datagrid('getChanges','updated');
&&&&var deletedId = [];&&&&&&&&//
&&&&if ( ids ) { // 设置了主键字段，才重新组装删除行的数据
&&&&&&&&if ( $.isArray(ids) ) { // 组合主键的，只返回包含组合主键和值的对象
&&&&&&&&&&&&deletedId = $.map( deleted, function(row ){
&&&&&&&&&&&&&&&&var newRow = {};
&&&&&&&&&&&&&&&&$.each( ids,function(idx, id){
&&&&&&&&&&&&&&&&&&&&newRow[id] = row[id];
&&&&&&&&&&&&&&&&});
&&&&&&&&&&&&&&&&return newRow ;
&&&&&&&&&&&&});
&&&&&&&&} else { // 只有一个主键字段的，只返回主键的值，连主键都不用返回
&&&&&&&&&&&&deletedId = $.map( deleted, function(row ){
&&&&&&&&&&&&&&&&return row[ids] ;
&&&&&&&&&&&&});
&&&&} else {
&&&&&&&&deletedId = deleted;
&&&&$('#w').window('open');
&&&&$.ajax({
&&&&&&&&url: url,
&&&&&&&&dataType: 'json',
&&&&&&&&method: 'POST',
&&&&&&&&data : {
&&&&&&&&&&&&inserted: $.toJSON(inserted),
&&&&&&&&&&&&updated: $.toJSON(updated),
&&&&&&&&&&&&deleted: $.toJSON(deletedId)
&&&&}).done(function(data){
&&&&&&&&if (data.status === 'OK') { // 提交成功
&&&&&&&&&&&&$(datagridId).datagrid('acceptChanges');
&&&&&&&&&&&&$(datagridId).datagrid('reload'); // 刷新datagrid
&&&&}).fail(function(resp){
&&&&&&&&$.messager.alert('出错了',resp.responseText);
&&&&}).always(function(){
&&&&&&&&$('#w').window('close');
7、修改function&reject
// 撤销更改
// parameters: datagridId（datagrid的id，例如'#dg'，注意前面加星号）
indexKey (该datagrid当前编辑行在对象editIndex中的key)
// 使用方法： 点击撤销更改按钮时调用
// &a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject('#dgCode','code');"&撤销更改
function reject( datagridId, indexKey ){
&&&&$( datagridId ).datagrid('rejectChanges');
&&&&editIndex[indexKey] = undefined;
主页面引入该文件easyui-row-edit.js
好啦，不同的tab页面只要简单调用即可，例如“代码管理”tab页面的datagrid和toolbar是这样子
&table id="dgCode" title="系统代码列表" style="width:850height:auto"
&&&&&&&&&&&&toolbar="#toolbarCode" pagination="true" idField="id"
&&&&&&&&&&&&rownumbers="true" fitColumns="true" singleSelect="true" striped="true"
&&&&&&&&&&&&data-options="" pageSize="20"&
&div id="toolbarCode"&
&&&&&&&&&a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append('#dgCode','code');"&新增&/a&
&&&&&&&&&a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit('#dgCode','code');"&删除&/a&
&&&&&&&&&a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept('#dgCode','code','&?=base_url();?&manager/system/commit_code','id');"&保存&/a&
&&&&&&&&&a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject('#dgCode','code');"&撤销更改&/a&
&&&&&/div&
并且加一小段javascript代码
&script type="text/javascript"&
&&&&editIndex['code'] = undefined;
&&&&$(function(){
&&&&&&&&$('#dgCode').datagrid({
&&&&&&&&&&&&url: '&?=base_url();?&manager/system/get_code_list',
&&&&&&&&&&&&onClickRow: function(index){
&&&&&&&&&&&&&&&&onClickRow('#dgCode', index ,'code');
&&&&&&&&&&&&}
&&&&&&&&});
而“菜单管理”tab页面只需要把上面的代码黑色+下划线部分修改一下即可
并且把两个url修改一下，分别获取菜单列表和提交更改的url
&table id="dgMenu" title="菜单列表" style="width:700height:auto"
&&&&&&&&&&&&toolbar="#toolbarMenu" pagination="true" idField="id"
&&&&&&&&&&&&rownumbers="true" fitColumns="true" singleSelect="true" striped="true"
&&&&&&&&&&&&data-options="" pageSize="20"&
&div id="toolbarMenu"&
&&&&&&&&&a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append('#dgMenu', 'menu');"&新增&/a&
&&&&&&&&&a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit('#dgMenu', 'menu');"&删除&/a&
&&&&&&&&&a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept('#dgMenu','menu','&?=base_url();?&manager/system/commit_menu','id');"&保存&/a&
&&&&&&&&&a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject('#dgMenu', 'menu');"&撤销更改&/a&
&&&&&/div&
&script type="text/javascript"&
&&&&editIndex['menu'] = undefined;
&&&&$(function(){
&&&&&&&&$('#dgMenu').datagrid({
&&&&&&&&&&&&url: '&?=base_url();?&manager/system/get_menu_list',
&&&&&&&&&&&&onClickRow: function(index){
&&&&&&&&&&&&&&&&onClickRow('#dgMenu', index, 'menu' );
&&&&&&&&&&&&}
&&&&&&&&});
新增加的tab页面以此类推即可，简化了工作流程
七、服务器端的处理
我使用的是php的codeigniter框架，在controller这样处理
function commit_menu(){
&&&&&&&&$inserted = isset($_POST['inserted']) ? json_decode( $_POST['inserted'], true ) : false;
&&&&&&&&$updated = isset($_POST['updated']) ? json_decode( $_POST['updated'], true ) : false;
&&&&&&&&$deleted = isset($_POST['deleted']) ? json_decode( $_POST['deleted'], true ) : false;
&&&&&&&&$this-&load-&model('system_model');
&&&&&&&&if ( $inserted ) {
&&&&&&&&&&&&$this-&system_model-&insertMenus($inserted);
&&&&&&&&if ( $updated ) {
&&&&&&&&&&&&$this-&system_model-&updateMenus($updated);
&&&&&&&&if ( $deleted ) {
&&&&&&&&&&&&$this-&system_model-&deleteMenus($deleted);
&&&&&&&&$result['status'] = 'OK';
&&&&&&&&$this-&output
&&&&&&&&&&&&-&set_content_type("application/json")
&&&&&&&&&&&&-&set_output( json_encode( $result));
在model层的处理就更简单了，使用Active Record的批量提交
function insertMenus ( $rows ){
&&&&&&&&$this-&db-&insert_batch(TABLE_SYSTEM_MENU, $rows);
&&&&function updateMenus ( $rows ){
&&&&&&&&$this-&db-&update_batch(TABLE_SYSTEM_MENU, $rows,'id');
&&&&function deleteMenus ( $ids ) {
&&&&&&&&foreach($ids as $id) {
&&&&&&&&&&&&$this-&db-&delete(TABLE_SYSTEM_MENU, array('id' =& $id));
其实，如果提交的处理都大同小异的话，在php后台也可以把这块功能单独写成通用的函数
只要传入不同的表名即可处理，这个就简单了，不做赘述。
补充一点：
由于刚使用easyui插件，很多方面处于摸索阶段，都是依靠官方的api文档
而api文档有的地方其实讲的不是很清楚，难免走了很多弯路
在使用行编辑功能的时候，有的字段不允许编辑，比如说创建时间，后台自动生成，前台不允许编辑
试了很多方法没搞成，最后才发现，只要在初始化这个字段的时候，"editor"不设置即可，就是这么简单
感谢关注 Ithao123jQuery Mobile频道，是专门为互联网人打造的学习交流平台，全面满足互联网人工作与学习需求，更多互联网资讯尽在 IThao123!
Laravel是一套简洁、优雅的PHP Web开发框架(PHP Web Framework)。它可以让你从面条一样杂乱的代码中解脱出来；它可以帮你构建一个完美的网络APP，而且每行代码都可以简洁、富于表达力。
Hadoop是一个由Apache基金会所开发的分布式系统基础架构。
用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。
Hadoop实现了一个分布式文件系统（Hadoop Distributed File System），简称HDFS。HDFS有高容错性的特点，并且设计用来部署在低廉的（low-cost）硬件上；而且它提供高吞吐量（high throughput）来访问应用程序的数据，适合那些有着超大数据集（large data set）的应用程序。HDFS放宽了（relax）POSIX的要求，可以以流的形式访问（streaming access）文件系统中的数据。
Hadoop的框架最核心的设计就是：HDFS和MapReduce。HDFS为海量的数据提供了存储，则MapReduce为海量的数据提供了计算。
产品设计是互联网产品经理的核心能力，一个好的产品经理一定在产品设计方面有扎实的功底，本专题将从互联网产品设计的几个方面谈谈产品设计
随着国内互联网的发展，产品经理岗位需求大幅增加，在国内，从事产品工作的大部分岗位为产品经理，其实现实中，很多从事产品工作的岗位是不能称为产品经理，主要原因是对产品经理的职责不明确，那产品经理的职责有哪些，本专题将详细介绍产品经理的主要职责
IThao123周刊<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&Bootstrap Datagrid demo - Basic setup
Click any row to select or deselect it. Click on table header to apply
simple column sorting (triple state: ascending,
descending, none). Manage selections from
button. Use
button to apply
multi-column sorting. Click and drag to re-arrange sorting rules.
With columns
button you
can show or hide columns. Click and drag any column to change its
position in data table. Easily re-apply default settings. Use
button to toggle filters pane.
Easily navigate pages from pagination section. Go directly to any page or set rows per page.
Get the code from [Code ] tab.
Just create a div and give it an ID -->
&div id="demo_grid1">&/div>
$(function() {
$("#demo_grid1").bs_grid({
ajaxFetchDataURL: "ajax_fetch_page_data.php",
row_primary_key: "customer_id",
columns: [
{field: "customer_id", header: "Code", visible: "no"},
{field: "lastname", header: "Lastname"},
{field: "firstname", header: "Firstname"},
{field: "email", header: "Email", visible: "no", "sortable": "no"},
{field: "gender", header: "Gender"},
{field: "date_updated", header: "Date updated"}
sorting: [
{sortingName: "Code", field: "customer_id", order: "none"},
{sortingName: "Lastname", field: "lastname", order: "ascending"},
{sortingName: "Firstname", field: "firstname", order: "ascending"},
{sortingName: "Date updated", field: "date_updated", order: "none"}
filterOptions: {
filters: [
filterName: "Lastname", "filterType": "text", field: "lastname", filterLabel: "Last name",
excluded_operators: ["in", "not_in"],
filter_interface: [
filter_element: "input",
filter_element_attributes: {"type": "text"}
filterName: "Gender", "filterType": "number", "numberType": "integer", field: "lk_genders_id", filterLabel: "Gender",
excluded_operators: ["equal", "not_equal", "less", "less_or_equal", "greater", "greater_or_equal"],
filter_interface: [
filter_element: "input",
filter_element_attributes: {type: "checkbox"}
lookup_values: [
{lk_option: "Male", lk_value: "1"},
{lk_option: "Female", lk_value: "2", lk_selected: "yes"}
filterName: "DateUpdated", "filterType": "date", field: "date_updated", filterLabel: "Datetime updated",
excluded_operators: ["in", "not_in"],
filter_interface: [
filter_element: "input",
filter_element_attributes: {
type: "text",
title: "Set the date and time using format: dd/mm/yyyy hh:mm:ss"
filter_widget: "datetimepicker",
filter_widget_properties: {
dateFormat: "dd/mm/yy",
timeFormat: "HH:mm:ss",
changeMonth: true,
changeYear: true,
showSecond: true
validate_dateformat: ["DD/MM/YYYY HH:mm:ss"],
filter_value_conversion: {
function_name: "local_datetime_to_UTC_timestamp",
{"filter_value": "yes"},
{"value": "DD/MM/YYYY HH:mm:ss"}
* Convert local timezone date string to UTC timestamp
* Alternative syntax using jquery (instead of moment.js):
var date = $.datepicker.parseDateTime(dateformat, timeformat, date_str);
* @see /questions/948532/how-do-you-convert-a-javascript-date-to-utc
* @param {String} date_str
* @param {String} dateformat
* @return {String}
function local_datetime_to_UTC_timestamp(date_str, dateformat) {
// avoid date overflow in user input (moment("14/14/2005", "DD/MM/YYYY") => Tue Feb 14 2006)
if(moment(date_str, dateformat).isValid() == false) {
throw new Error("Invalid date");
// parse date string using given dateformat and create a javascript date object
var date = moment(date_str, dateformat).toDate();
// use javascript getUTC* functions to conv ert to UTC
date.getUTCFullYear() +
PadDigits(date.getUTCMonth() + 1, 2) +
PadDigits(date.getUTCDate(), 2) +
PadDigits(date.getUTCHours(), 2) +
PadDigits(date.getUTCMinutes(), 2) +
PadDigits(date.getUTCSeconds(), 2);
* Add leading zeros
* @param {Number} n
* @param {Number} totalDigits
* @return {String}
function PadDigits(n, totalDigits) {
n = n.toString();
var pd = '';
if(totalDigits > n.length) {
for(i = 0; i < (totalDigits - n.length); i++) {
pd += '0';
return pd + n.toString();
require_once '/path/to/dacapo.class.php'; // simple database wrapper
require_once '/path/to/jui_filter_rules.php';
require_once '/path/to/bs_grid.php';
$db_settings = array(
'rdbms' => 'MYSQLi',
'db_server' => 'SERVER_NAME OR IP',
'db_user' => 'DB USER',
'db_passwd' => 'DB PASS',
'db_name' => 'DB NAME',
'db_port' => '3306',
'charset' => 'utf8',
'use_pst' => true, // use prepared statements
'pst_placeholder' => 'question_mark'
$ds = new dacapo($db_settings, null);
$page_settings = array(
"selectCountSQL" => "SELECT count(id) as totalrows FROM customers",
"selectSQL" => "SELECT c.id as customer_id, c.lastname, c.firstname, c.email, g.gender, c.date_updated
FROM customers c INNER JOIN lk_genders g ON (c.lk_genders_id = g.id)",
"page_num" => $_POST['page_num'],
"rows_per_page" => $_POST['rows_per_page'],
"columns" => $_POST['columns'],
"sorting" => isset($_POST['sorting']) ? $_POST['sorting'] : array(),
"filter_rules" => isset($_POST['filter_rules']) ? $_POST['filter_rules'] : array()
$jfr = new jui_filter_rules($ds);
$jdg = new bs_grid($ds, $jfr, $page_settings, $_POST['debug_mode'] == "yes" ? true : false);
$data = $jdg->get_page_data();
// data conversions (if necessary)
foreach($data['page_data'] as $key => $row) {
// this will convert Lastname to a link
$data['page_data'][$key]['lastname'] = "&a href=\"/test/{$row['customer_id']}\">{$row['lastname']}&/a>";
// this will format date_updated (attention date_convert is a local function)
$data['page_data'][$key]['date_updated'] = date_convert($row['date_updated'], 'UTC', 'YmdHis', 'UTC', 'd/m/Y H:i:s');
echo json_encode($data);
More demos
Styling data table
Custom columns
Custom HTML
Responsive web design
Multiple row selection
Demo SQL code
SQL of this demo is
Free themes for Bootstrap
Syntax highlighting using /SyntaxHighlighter.
pontikis.net
