easyui的datagrid的使用记录

datagrid是在 table的基础上变化而来的，而不是在div的基础上来的。从div来变成 datagrid，样式的设置还是是比较麻烦的。

dg=datagrid 的标题来源于 columns 属性，其内容来源于 url属性。关键是，一定要设置这样的属性，才能给你显示标题和内容，否则即使你写了 tr等都不会显示

dg的url 最后输出的内容必须是 json格式：如果是php的，则要用echo，如果是其他文件，就要用 json数据

最重要的是： dg的前端和后台服务器之间的通信，都是通过 ajax的方式来实现的。如果在 php中有 sleep语句的话，会看到加载loading...等待的效果。 ajax提交动作发生在每次你在前台点击下一页等按钮的时候，前台需要在ajax提交的时候，向后台服务器传送数据；后台需要返回 json格式的数据给前台。

而且ajax的方式好像都是 post方式。

比如：分页，前端需要向后台传递数据：一个是page（当前页码，即是第几页？），一个是 pageSize（一页多少条数据）。然后后台post获取到页码和页数，在 mysql的查询语句中，用 limit start rowsCount，来规范限定返回的数据。

而且，后台除了返回当前页面需要的部分 rows数据外，还要返回一个 total总页数。

最后的返回结果要写成 json格式的：这种类型： {"total": $total, "rows": .....}

dg的主要内容：

一个是加载 dg的内容，并完成分页；

二个是，排序，可以只做初始化的时候排序；

三是：设置dg的样式，有striped， rowNumbers， singSelected为true等等.

只要是ajax服务器端有echo内容的，即使在前端没有处理、使用这些数据的代码，比如没有什么alert的，也是可以看到服务器返回的数据的，使用firebug的 network的 param，和response，就可以查看，而且这个其实是查看得很详细很全面的。

关于isset和 empty在查询按钮使用时的区别？

isset是判断 $_POST的某个变量名是否设置了的，主要是用来判断按钮是否被单击了的，主要是防止页面刷新时执行代码；

而！empty 是判断 $_POST的变量名的值是否为空，主要是用来判断搜索框中是否有输入内容的，常用的判断就是：

if(isset($_POST['name']) && !empty($_POST['name'])){...}

php中变量的两边使用大括号？

主要有三种情形：

一是避免变量和变量后面的字符串连在一起，从而引起混淆和错误；
二是在变量的外面两边使用大括号，可以在单引号中也可以输出变量的值，避免使用点号来连接字符串的麻烦
三是，在变量的名称后使用大括号，比如 $str{5} 可以输出字符串中的第n 个字符。常用来判断字符串的长度：if(!isset($str{5})){...}

==============================================

写代码的一个重要方法, 不是从上到下挨着挨着的写, 而是先写结构, 像if...else这些结构, 然后写简单的分支,最后才写重要的最复杂的分支

dg的增删改编辑操作, 类似于百度网盘, 工具栏上各种操作按钮, 然后在一个 obj={...}的各种成员变量和成员方法中来实现这些功能.
show 和hide方法, 可以同时针对多个匹配的元素, 比如: 多个按钮可以同时一次性的 show 或 hide: $('#btn1, #btn2'). show(); $('#btn1, #btn2'). hide();

关于datagrid的主要内容有:

就是dg的内容载入, 通常是通过js的方式, 并且要分页;
就是对内容进行排序, 一般实现初始化的时候排序就好了
是设置dg的内容的一些样式, 比如: striped, rowNumbers, singleSelect(但是如果要增删改的话, 通常还不能设为单选择), 列宽自适应等fitColmns. 在列宽自适应的时候, 要同时设置每一列的宽度为100(这个100是百分比)
设置工具栏, 增删改的按钮, 以及实现查找功能. 工具栏还是使用 id#tb的方式. 查询的时候, 可能有多个查询条件, 使用 And. 还要注意在查询/查找 /过滤的情况下, 分页功能仍然要是正确的和可用的

要注意查询/ (以及后面的增删改等操作) 的过程基本上都是3步走 : 在obj对应的方法函数中, 先调用 dg的 load方法, 向服务器传递查询条件的键值对; 然后服务器端接受查询条件,在数据库中进行处理, 并返回结果; 然后再在客户端用 ajax 处理接收到的数据.
5/6/7章是进行增删改操作的: 第五章是进行增加操作的前台处理和数据准备和ajax提交; 第六章是进行删除和修改前台处理和数据准备等; 第七章是讲增删改的后台服务器操作的

而有些操作是, 共同的: 比如开始编辑的操作是: beginEdit, 结束编辑的操作是: endEdit.

==========================================

dg的数据加载?

columns属性是两个中括号, 每个对象的属性可以有: field, title, checkbox, sortable, width, 数据的对齐方式align/valign, 跨列/行 rowspan, colspan等
列的内容, 只能从 url属性中通过 ajax 远程加载, 要注意的是, url的内容, 是一个 json格式的数组, 数组元素是 json格式的对象 . 如果是从数据库取数据, 必须进行json 格式处理.即:

[{"id": 1, "name": "foo"}, .....] 的形式. 如果 php返回的格式不是这样的, 将不会加载数据进来.

比如

  public function  dgcontent(){

    $sort = I('post.sort');

    $order = I('post.order');

    $page = I('post.page');

    $pageSize = I('post.rows');

    $from = $pageSize*($page-1);

    $dg = M('dg');

    $total = $dg -> count();

    $result = $dg->field('id, dept, class, name')->order("$sort $order")->limit($from,$pageSize)->select();

    $json="";

    for($i=0, $j=count($result); $i<$j; $i++){

      $json .= json_encode($result[$i]).',';

    }

    $json ='{"total":'.$total.',"rows":['. substr($json, 0 , -1).']}';

    echo $json;

  }

==========================================

strip和stripe的区别?

strip [ strip] : 的意思, 名词时表示: 条, 带, 狭长地带, 带子, 布带的意思, 动词, 则是 '剥夺'; '分割成条带"
stripe [straip] 的意思 , 是各种条纹! 比如斑马身上的条纹, 横条纹, 竖条纹, 测试压力的复杂条纹之类的.

MySQL按照字段的汉字的拼音排序,怎么和常规的想象不一样啊?

按照汉字的拼音排序，用的比较多是在人名的排序中，按照姓氏的拼音字母，从A到Z排序；如果存储姓名的字段采用的是GBK字符集，那就好办了，因为GBK内码编码时本身就采用了拼音排序的方法（常用一级汉字3755个采用拼音排序，二级汉字就不是了，但考虑到人名等都是常用汉字，因此只是针对一级汉字能正确排序也够用了）。直接在查询语句后面添加 order by name asc; 查询结果按照姓氏的升序排序；如果存储姓名的字段采用的是 utf8字符集，需要在排序的时候对字段进行转码；对于的代码是 order by convert(name using gbk) asc; 同样，查询的结果也是按照姓氏的升序排序(所以, 如果存储的是utf8字符集, 因为有一个转码的过程, 所以看到的排序和想象中的不一样.

count(1) 是什么意思?

count(1)，其实就是计算一共有多少符合条件的行。

1并不是表示第一个字段，而是表示一个固定值。

其实就可以想成表中有这么一个字段，这个字段就是固定值1，count(1)，就是计算一共有多少个1.

同理，count(2)，也可以，得到的值完全一样，count('x')，count('y')都是可以的。一样的理解方式。在你这个语句理都可以使用，返回的值完全是一样的。就是计数。

count(*)，执行时会把星号翻译成字段的具体名字，效果也是一样的，不过多了一个翻译的动作，比固定值的方式效率稍微低一些。

=====================================

到底用margin还是用top？

主要还是从语义和你的用途上来区分，虽然都能实现相同的效果。

 何时应当使用margin：

- 不需要在border外侧添加空白时。

- 空白处不需要背景（色）时。

- 上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。 

何时应当时用padding：

-  需要在border内测添加空白时。

-  空白处需要背景（色）时。

-  上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。 

：：： margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。

margin用于布局分开元素使元素与元素互不相干；“老死不相往来” 是两家人

padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。 是一家人

======================================

关于js字面对象的定义:

/*在js中定义变量,并不是必须加var的! 而且, 不加var表示的是 "全局变量", 是顶级对象window的成员变量

直接定义的对象字面变量, 不像用function定义的类, 可以用var什么的, {}内部只能是 key: val形式的键值对(无序)集合,所以, 即使是

定义成员变量, 也只能用 var_name: some_value的形式来定义, 而不能用分号语句的形式. 同时, 所有的键值对之间要用逗号隔开

*/

//这里的obj没有加var, 就是全局对象window的属性

obj={

  rowEdit : undefined,

  search: function(){

  },

  add: function(){

  },

  update: function(){

  },

  remove: function(){

  },

  save:function(){

  },

};

js中的几种假值和空值? (参考: `https://blog.csdn.net/u012739535/article/details/17621247`, `https://www.cnblogs.com/yangzhx/p/4019073.html` )

包括: undefined, '', 0, null, false. 这些都叫假值或空值, 在 if判断中都是假. 但是它们还是有区别的:

它们的类型不同: typeof( var_name) 可以知道: undefined 的类型是: undefined, 0 的类型是: number, '' 的类型是string, null的类型是: object, 也就是说 null是对象的空值; false是boolean类型的.
这些空值相互之间用 == 判断 , 的结果是 : 0, false , ''', 三者之间是相等的: 即 0 == false == '' 的结果是true的. 可以认为这三个是 " 假值". 而 undefined==null , 可以认为它们是空值. 但是 undefined和 null 跟数字相加的结果是不同的: 比如: 10+null =10, 10+undefined = NaN.

所有的假值用 == 和空值比较的结果都是 false.

假值 , 有一个实际的对象, 所以可以用 .toString() 方法.

而空值, 连对象都没有, 所以不能用 .toString 方法, 否则将抛出异常
再就是它们强制类型转换 : String(var_name) 后的结果不同: 转换成字符串的时候, 结果分别跟它们的 "原型字面字符串". 这在字符串拼接累加的时候要注意.
undefined表示无效对象, 当定义一个变量未被初始化时, 就是undefined, 而 null是已经被初始化为空对象. 但是所有的空值和假值用 === 判断都是false.

js中(包括其他任何面向对象的语言) 都是一样的, 如果要在对象中, (即对象内部) , 引用对象的成员变量, 都应该加上对象本身的引用this, 否则凡是不加this的变量, 都认为是全局变量而不是对象本身的成员变量, 这样就会报引用错误! 当然, 如果是在对象的外部, 引用对象的成员, 就要用对象的类名了, 比如: obj.rowEdit.

obj={

  rowEdit : undefined,

  search: function(){

....

  add: function(){

    if(!this.rowEdit){   // 这里要加this

      $('#save, #cancel').show();

      $('#box').datagrid('insertRow',{

	index: 0,

	row: { }

      });

datagrid如何禁止编辑某一行, 某一列或某一个单元格?

参考 : https://www.cnblogs.com/langhua/p/3672820.html

禁止行编辑: 先获取到某一行, 然后根据条件, 不调用beginEdit方法, 直接返回, 其他则调用 beginEdit方法
禁止某一列编辑, 要么直接就不用设置列的 editor属性; 如果设置了editor属性, 则调用 getColumnOption, 返回列的属性op, 然后设置 op.editor={} 为空
禁止某一个单元格编辑...

=================================================

dg中, tp中, 凡是从控制器传递到模板的变量, 比如: $this ->foo = 'foo',

那么在模板中, {$foo}是可以直接解析的! 根本就不需要再在 {$foo} 的两边再考虑什么引号了, 不管是单引号, 还是双引号都不再需要了! 特别是再 href传递变量的时候加上引号等反而会出错. 比如: url: "{:U('xscontent')}"+'/?class={$class}', 就好了.
但是 , 如果是在 alert 等语句中, 要使用模板变量的话, 你就还是需要加上引号了, 因为直接解析模板变量后, 就是一个 "字符序列", 不是字符串! 而报错!

dg的后台是如何返回数据, 来填充前台的记录行的?

    /*datagrid的返回结果, 来填充 前台的 数据行,必须严格要求json格式, 而且json的格式和属性名必须是:

     *  "rows:": json_object_array, 即必须是rows, 后面的数据必须是数组, 每个数组元素必须是json格式的对象

     * echo '{"total":"11","rows":[{"id":"100", "class":"A_class", "name":"the_Name", "account":"the_account"}]}';

     */

==============================================

一个很重要的注意问题: 在ajax中, 如果 url的目标地址, target是空的字符串时, 该次 ajax 将提交给 "当前页面"! 从而也会得到 ajax 成功success的结果! 而事实上这在很多应用场景下是不允许的. 所以你要判断一下你的 ajax url 目标地址是否为空

比如: 在 dg的 onAfterEdit事件中, 就要判断 url 是否为空, 然后才去调用 ajax.

    onAfterEdit: function(rowIndex, rowData, changes){

      var inserted = $('#box').datagrid('getChanges', 'inserted');

      var updated = $('#box').datagrid('getChanges', 'updated');

      var url=info='';

      if(inserted.length>0){

	url='{:U("add")}';

	info='新增';

      }

      if(updated.length>0){

	url='{:U("update")}';

	info='修改';

      }

/*

     这里很重要 , 要判断一下 url是否为空, 否则 即使任意地 双击 一行记录, 再去 双击另外一行记录, 即使没有和数据库进行 修改操作, 也会提示 ajax的success提示信息 , 然而这个时错误的!

*/

      if(url!='' && info != ''){

	$.ajax({

	type: 'post',

	url: url,

	data: {row: rowData,},

	beforeSend: function(){

	  $('#box').datagrid('loading');

	},

	success: function(data){

	  if(data !== false){

	    $('#box').datagrid('loaded');

	    $('#box').datagrid('load');

	    $('#box').datagrid('unselectAll');

	    $.messager.show({

	      title: '消息',

	      msg: '1个班级 '+ info +' 成功',

	      showType: 'slide',

	      timeout: 3000

	    });

	    obj.rowEdit = undefined;

	  }

	},

});

===================================================

如何禁用datagrid的某一行被单击选中或被双击选中? 参考: `https://blog.csdn.net/Dzq_Boyka/article/details/78531217`

主要思想是, 在 onClickRow 和 onDblClickRow 事件中 , 必须显示的调用 $('#box').datagrid('unselectRow', rowIndex) 方法, 不能只是简单地返回 return.

要想使dg 在新增的时候, 不能选择行或双击行操作, 那么可以设置一个标识变量: isAdded , 当每次新增的时候, 都重新设置 isAdded = false, 然后, 判断 onClickRow 和 onDblClickRow 事件中的 isAdded是否为false, 或者 true
但是又要保证初次载入 datagrid的时候, 如果不点击新增的时候, 要能够选择单行, 或双击单行操作, 就要初始化 obj的 isAdded 为true.

obj={

  rowEdit : undefined,

  isAdded: true,  // 这里是 关键!

  add: function(){

    // 一旦增加的时候, 就要重新初始化isAdded为false, 因为只要保存/取消一次后, isAdded就失效了

    this.isAdded=false;

....

}

    onDblClickRow: function(rowIndex, rowData){

       // 在新增记录的时候, 禁止单击选行 和 双击选行

      if(!obj.isAdded){

	  $('#box').datagrid('unselectRow', rowIndex);

	  return;

      }

      // 双击某一行的时候, 首先要关闭之前可能被修改的行

      if(obj.rowEdit != undefined){

	$('#box').datagrid('endEdit', obj.rowEdit);

	obj.rowEdit = undefined;

      }

  ............

    },

    onClickRow: function(rowIndex, rowData){

          if(!obj.isAdded){

	  $('#box').datagrid('unselectRow', rowIndex);

	  return;

      }

    },

=====================================================

分页器: pagination的ajax事件? 参考: `https://blog.csdn.net/H12KJGJ/article/details/53672096`

分页器的分页list , 不是固定的, 也不是什么倍数, 你可以任意的自由的设置任意数值:

pageList 	 类型array 	用法: 用户能改变页面尺寸。pageList 属性定义了能改成多大的尺寸。

代码实例：

    $('#pp').pagination({

    	pageList: [10,20,50,100]

    });

分页器中的一个页面由两个因素来决定: 一个是: pageSize( 每一个页面的最大尺寸), pageNumber(页数), 所以每一页的第一条数据的索引值就是: pageSize*(pageNumber-1);

这个就是用来做数据库的limit的依据的:

因此 : onSelectPage 事件, 就是当重新改变了pageSize , 重新选择了 pageNumber后所得到的页面.
总共有4个 ajax事件: onSelectPage, onBeforeRefresh, onRefresh, onChangePageSize... 因此, 在dg中改变分页尺寸的事件是 : onChangePageSize的回调函数中写

===========================================

关于bootstrap中的 table中的单元格内容水平居中和垂直居中? 参考: `https://blog.csdn.net/peng_hong_fu/article/details/70662979`

水平居中是: 写 text-center类, 而垂直居中, 则是写 stye的 vertical-align: middle
要注意的是: th的水平居中, 要写在 th单元格内 , 不能写在th的父元素 tr中; 普通的td的水平居中可以写在父元素 tr中

而垂直居中 , 不能简单的写: tbody tr td的样式, 而是要写 .table tbody tr td. 因为后者的 css优先级为 10+1+1+1 =13, 而前者的css优先级是: 1+1+1=3. 所以要优先执行后者的css. 而后者的css正是在 bootstrap中定义的, 默认为top. 所以你简单的写 tbody tr td是改变不了的, 要被 bs的所覆盖, 要想在 style 标签中 " 覆盖" bs的默认设置的话, 需要写完整: .table tbody tr td
总之, 选择符越详细越具体, 它的css优先级值就越大. 优先级就越高

css的优先级? 参考 `https://blog.csdn.net/amyleeYMY/article/details/63685330`

由四位数字组成:

!important =1000,

id的优先级=100,

类, 伪类, 属性的优先级 =10,

元素, 伪元素的优先级=1

这些优先级, 不管层次, 只要有一个就加上相应的优先级数值. 最后算总和.

但是要注意:

伪元素只有四个, 即 :before, :after, : first-letter, :first-line , 主要是表示位置的

伪类有更多, 只要是表示 "状态"的, 比如 :link, :active, :visited, :hover, :focus, :first-child 等
如果有多个相互冲突的 css规则同时作用在同一个元素上, 则最终起作用的是: 以定义这些类样式的先后顺序为准, 后定义的样式会覆盖先前定义的样式, 即后定义的样式最终将起作用. 而跟该元素上 , 多个类样式书写的先后顺序无关.

easyui的消息框是异步的, 如何理解?

异步, 表示它是 "非模态的", 虽然有 "遮照" 样式, 但是它并不会阻止该消息框后续的代码的执行. 相反, 在执行消息框的回调函数时, 主函数的剩余代码已经执行完毕了! 所以这就是为什么主函数中无法获取回调函数的返回值的原因
那么要想实现模态框的效果, 想要某些代码在点击 "确定" 后, 再执行, 就要把这些代码放在消息框的回调函数中, 因为回调函数总数在用户单击 "确定" 按钮后才执行.