easyui学习笔记1-（datagrid+dialog）

jQuery EasyUI是一组基于jQuery的UI插件集合体。我的理解：jquery是js的插件，easyui是基于jquery的插件。用easyui可以很轻松的打造出功能丰富并且美观的UI界面。

这两天主要接触了easyui的datagrid组件和dialog组件。

easyui的组件都有属性，事件，方法。

　　先以这几天用到的datagrid组件来讲，后台的php根据条件查出数据，echo json_encode($list) 将数据以json格式传给前台。

　　前台html根据name从json数据中去对应的值并展示。

　　1，后台代码

　　

    
            $list=M('table')->select();
            $total=M('table')->count();


            if(!empty($list)){
            $results['rows'] = $list;
            $results['total'] = $total;
        　　 echo json_encode($results);
        　　}   

 

2,前台html表格语法

    <!--定义一个表格-->
    <table id="dg" title="My User" class="easyui-datagrid" style="width:700px;height:250px" toolbar='#toolbar'
    data-options="
                url: '{:U('action/function')}',
                rownumbers: true,
                fit:true,
                fitColumns:true,
                singleSelect: true,
                
                pagination: true,
                pageSize:10,
                pageNumber:1,
                pageList: [10,20],
                showFooter: true,
                idField: 'id',
                onBeforeLoad: function(row,param){
                    if (!row) {    // load top level rows
                        param.id = 0;    // set id=0, indicate to load new page rows
                    }
                }
                
            ">
        <thead>
            <tr>
                <th field="firstname" width="50">First Name</th>
                <th field="lastname" width="50">Last Name</th>
                <th field="phone" width="50">Phone</th>
                <th field="email" width="50">Email</th>
            </tr>
        </thead>
    </table>

　　<div id="toolbar" style="margin-top:5px;">
                <form  method="post" action="{:U('action/function')}">
                    <table>
                        <tr>
                            <td>name:<input style="width:150px" class="easyui-validatebox" name="name" type="text" id="name" value=""  ></input></td> 

                            <td>
                              <a href="javascript:void(0)" iconCls="icon-search" class="easyui-linkbutton" onClick="doSearch()">查询</a>
                            </td>
                        </tr>
                    </table>
                </form>
     </div>

3，batle会根据url请求数据，toolbar='#toolbar'定义了工具栏 。工具栏可以根据name进行搜索。

　　搜索的js代码如下

　　

    function doSearch(){
        $('#dg').datagrid('load',{
            name:    $('#name').val(),
        });
    }    

解释：点击搜索时并不是form表单进行提交。js根据节点获取输入的值。通过load方法传给后台，后台根据传过来的条件过滤数据，再返回给前台。完成搜索功能。

 

二，dialog组件

　　1，dialog对话框组件，一般通过点击按钮选择展示与否。这点通过js改变dialog组件的closed属性值是true或false。

　　js代码

function editNode(id){
            $.ajax({
                type:'post',
                 url:"__APP__/action/function",
                data:{id:id},
              success:function(data){
                    row = eval('('+data+')');　　//将后台返回的json数据格式强制转换成对象
                    if (row){
                        $('#dlg-form').form('clear');
                        $('#dlg').dialog('open').dialog('setTitle','编辑');
                        $('#dlg-form').form('load',row); 
                        
                        $("[name^=tuitype]").each(function(){
                            var val=$(this).val();
                            
                            if(row.tuitype.indexOf(val)>-1){                         
                           $(this).attr("checked",true);
                            }
                        });
                        
                    }else{
                        $.messager.show({
                            title: '出错啦！！',
                            msg: '请选择一条'
                        });
                    
                    }
              }
            });
            
        }

2，前台html的dialog语法

        <div id="dlg"     class="easyui-dialog" style="width:700px;height:400px;padding:10px 20px"
            closed="true" buttons="#dlg-buttons">
        <form id="dlg-form" method="post" novalidate>
            <div class="fitem">
                <label>名称:</label>
                <input name="name" class="easyui-validatebox"  style="width:200px;">
            </div>
        </form>
   　　 </div>

3，form加载值的方法，这样可以让form表单展示原有的值

php代码：echo json_encode($list);    //讲数据查询出来，并转换成json字符串传给后台

html代码:$row=eval('('+data+')');    //将接收到的数据转换成对象
     $('#dlg-form').form('load',row); //将数据加载到form表单。