实现搜索查询,重置,删除,查看,处理按钮功能

<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'center',border:false">
 <div id="wu-toolbar-jb">
<div id="search-jb" class="easyui-accordion">
<div id="search_jb" title="" style="overflow: auto; padding: 10px;"></div>
<div id="searchjb" title="搜索区" class="wu-toolbar-search"
iconCls="icon-search" align="center"
style="overflow: auto; padding: 10px;">
 
<label>被举报人姓名：</label> 
  <input class="easyui-text" id="report_realname" name="report_realname" style="width: 200px"> 
<label>举报时间：</label> 
  <input id="report_date" class="easyui-datebox" name="report_date" style="width: 100px" data-options="editable:false"> 
   <a href="#" class="easyui-linkbutton" iconCls="icon-search" οnclick="showJB()">查询</a>
<a href="#" class="easyui-linkbutton"
iconCls="icon-redo" οnclick="clean()">重置</a>
    
</div>
</div>
<div class="mm_jb">
 
<a href="#" class="easyui-linkbutton"   οnclick="deal()">处理</a> 
<a href="#" class="easyui-linkbutton"  iconCls="icon-eye" οnclick="show()">查看</a>
</div>
</div>
</div>


<table class="easyui-datagrid" id=" jb" toolbar="#wu-toolbar-jb" ajaxOptions="{type:'get'}"></table>
<div id="wu-jbgl" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width: 800px; padding: 10px;">

<table>
<tr>
<td width="80" align="right">ID:</td>
<td>
<input type="text" id="id" name="id" value="" readonly="readonly" /></td>
</tr>
<tr>
<td width="80" align="right">用户ID:</td>
<td>
<input type="text" id="uid" name="uid" value="" readonly="readonly" /></td>
</tr>
<tr>
<td width="80" align="right">商品ID:</td>
<td>
<input type="text" id="pid" name="pid" value="" readonly="readonly" /></td>
</tr>
<tr>
<td width="80" align="right">举报人姓名:</td>
<td>
<input type="text" id="report_nickname" name="report_nickname" value="" readonly="readonly" /></td>
     <!-- <input type="text" id="jb_report_nickname" class="easyui-validatebox" data-options="required:true"  value="" placeholder="请输入举报人姓名" /> -->
</tr>
 
<tr>
<td width="80" align="right">举报原因:</td>
<td>
<textarea id="report_reason" name="report_reason" value="" readonly="readonly" style="width: 200px; height: 100px"></textarea>
</td>
</tr>
<tr>
<td width="80" align="right">举报人时间:</td>
<td>
<input type="text" id="jb_report_date" name="report_date" value="" readonly="readonly" /></td>
</tr>
<tr>
<td width="80" align="right">举报状态</td>
<td>
<input type="text" id="report_state" name="report_state" value="" readonly="readonly" /></td>
</tr>
<tr>
<td width="80" align="right">被举报人电话</td>
<td>
<input type="text" id="phone" name="phone" value="" readonly="readonly" /></td>
</tr>
<tr>
<td width="80" align="right">被举报人姓名</td>
<td>
<input type="text" id="jb_report_realname" name="report_realname" value="" readonly="readonly" /></td>
    <!-- <input type="text" id="jb_jb_report_realname" class="easyui-validatebox" data-options="required:true"  value="" placeholder="请输入被举报人姓名" /> -->
</tr>
<tr>         
           <td width="80" align="right"></td>
           
        </tr>    
</table>
<!-- </form> -->
</div>
</div>
<script type="text/javascript">
//重置
function clean() {
    $("#searchjb input").val("");
}
 
 
//查看
function show() {
    var selected = $('#jb').datagrid('getSelected');
    if (selected != null) {
        $('#wu-jbgl').show();
        $('#id').val(selected.id);
        $('#uid').val(selected.uid);
        $('#pid').val(selected.pid);
        $('#report_nickname').val(selected.report_nickname);
        $('#report_reason').val(selected.report_reason);
        $('#jb_report_realname').val(selected.report_realname);
        $('#phone').val(selected.phone);
        $('#report_state').val(selected.report_state);
        $('#jb_report_date').val(selected.report_date);
if(selected.report_state=='0'){
$('#report_state').val('已处理');
}else{
$('#report_state').val('未处理');
}
        $('#wu-jbgl').dialog({
            closed: false,
            modal: true,
            title: "查看",
            buttons: [{
                text: '确定',
                iconCls: 'icon-save',
                handler: function () {
                    var data = {
                         id: selected.id, //发送数据
                    };
                    $.postAjax('/api/travelenjoyReport/findById', data, function (result) {//postAjax与post是一样的
                        if (result.code == '0') {
                            $('#wu-jbgl').dialog('close');
                        } else {
                            $.messager.alert('信息提示', '查询失败！', 'info');
                        }
                    }, function (error) {
                        $.messager.alert('信息提示', '查询失败！', 'info');
                    });
                   
                }
            }, {
                text: '关闭',
                iconCls: 'icon-cancel',
                handler: function () {
                    $('#wu-jbgl').window('close');
                }
            }]
        });
    } else {
        $.messager.alert('信息提示', '至少选中一行', 'info');
    }
}  
//载入数据
$('#jb').datagrid({
    url : getBaseUrl("/api/travelenjoyReport/findAll",""), //没有参数的时候,最后一个就直接是一个引号即可
method : 'GET',
    rownumbers: true,   // 当true时显示行号。默认false
    singleSelect: false, // 当true时只允许当前选择一行。默认false 
    pageSize: 20, // 当设置分页属性是，初始化的页面大小。默认10行 
    pagination: true,   // 当true时在DataGrid底部显示一个分页工具栏。默认false
    multiSort: true, //给数据表格增加排序功能
    fitColumns: true,// 自动填充满datagrid(数据网格)指定的宽度
    fit: true,
    striped: true, // 当true时，单元格显示条纹。默认false 隔行换色 
    columns: [[
               {
            checkbox: true //表的每一行添加可选按钮
   
        },{
              field: 'id',
                   title: 'ID',
                   width: 80,
                   
              },{
    field: 'uid',
         title: '用户ID',
         width: 80,
         
    } , {
      field: 'report_nickname',
          title: '举报人姓名',
          width: 100
    }, {
    field: 'report_realname',
      title: '被举报人姓名',
      width: 100
},
    {
    field: 'report_reason',
         title: '举报原因',
         width: 100
    }, {
    field: 'report_date',
         title: '举报时间',
         width: 100
    },
    {
      field: 'report_state',
          title: '举报状态',

          width: 100,

       /**

       formatter():单元格的格式化函数，需要三个参数： 

               value： 字段的值。

                  rowData： 行的记录数据。
                  rowIndex： 行的索引。 */

          formatter: function (value) {
              if (value == '0') {
                  return "已处理";
              }
              if (value == '1') {
                  return "未处理";
              }
          }
   },
   {
   field: 'phone',
       title: '被举报人电话',
       width: 100
},
{
field: 'report_type',
     title: '举报类型',
     width: 100
     
}
    
    ]] 
});
 
//处理
  function deal() {
    var selected = $('#jb').datagrid('getSelected')
    if (selected != null) {
        var data = {id: selected.id}; //发送数据
        if (selected.report_state == 1) {
        $.messager.confirm('提示信息', '是否要处理该数据?',function(r){
    if(r){
    $.postAjax("/api/travelenjoyReport/updateNoDeal", data, function (ressult) {
                    if (ressult.code == '0') {
                        $("#jb").datagrid('reload');
                        $.messager.alert('信息提示', '处理成功！', 'info');
                    }
                });
    }
    });
        } else {
            $.messager.alert('信息提示', '已处理！', 'info');
        } 




    }else {
        $.messager.alert('信息提示', '至少选中一条！', 'info');
    } 
}



//搜索
function showJB() {
    var queryParams = $('#jb').datagrid('options').queryParams;
    queryParams.report_realname = $("#report_realname").val();
    queryParams.report_date = $("#report_date").datebox('getValue');
    $('#jb').datagrid('reload');
}

 </script>

(1)easyui datagrid fitColumns配置设置为true时，但是数据列并没有自动填充满datagrid指定的宽度，出现这个问题，是因为你的所有列配置都没有指定width属性，导致datagrid不会重新计算列宽度，所以列宽取列标题宽度或者此列内容宽度的最大值。

(2)

easyui的formatter属性可以帮助我们更加灵活的显示数据库中的数据。比如，我有一个已处理,未处理字段，使用数字表示，0表示已处理，1表示未处理，展示给客户的时候我当然希望是中文的形式。

只需要写这么一个formatter方法:

formatter: function (value,row,index) {
              if (value == '0') {
                  return "已处理";
              }
              if (value == '1') {
                  return "未处理";
              }

          }

 (3)

目前，主流的web架构都是采用动静态分开部署的方案进行部署的，也就是说前端和服务端的代码会放到两个不同的域中。这样就会导致客户端在访问服务端时需要进行跨域操作，而OPTION是客户端浏览器进行的HTTP跨域预访问，每一个option是没有携带session_id的，所以一般要在服务端进行处理，对option请求，返回一个204的状态码，返回空body，节省流量。