实现搜索查询,重置,删除,查看,处理按钮功能
2018-02-27 09:51
302 查看
<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" onclick="showJB()">查询</a>
<a href="#" class="easyui-linkbutton"
iconCls="icon-redo" onclick="clean()">重置</a>
</div>
</div>
<div class="mm_jb">
<a href="#" class="easyui-linkbutton" onclick="deal()">处理</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-eye" onclick="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');
f1a1
}
}, 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,节省流量。
<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" onclick="showJB()">查询</a>
<a href="#" class="easyui-linkbutton"
iconCls="icon-redo" onclick="clean()">重置</a>
</div>
</div>
<div class="mm_jb">
<a href="#" class="easyui-linkbutton" onclick="deal()">处理</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-eye" onclick="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');
f1a1
}
}, 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,节省流量。
相关文章推荐
- 基于Python实现通过微信搜索功能查看谁把你删除了
- matlab的gui图像处理操作界面,实现重置和退出按钮功能
- 基于Python实现通过微信搜索功能查看谁把你删除了
- jQuery实现form表单reset按钮重置清空表单功能
- 实现函数功能对数组元素进行插入、删除、查询操作
- SSH框架网上商城项目第8战之查询和删除商品类别功能实现
- PHP 搜索查询功能实现
- jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
- 封装一个字符数组,实现增加,删除,替换,打印,搜索等功能
- 【SSH网上商城项目实战11】查询和删除商品功能的实现
- jQuery 异步模糊查询 实现下拉搜索功能
- .Net/C# 封装磁盘目录文件搜索功能的工具类 (实现了与搜索相关的事件,以便插入客户处理代码)
- bootstrap-table 怎么自定义搜索按钮实现点击按钮进行查询
- .net连接数据库,实现增加,修改,删除,查询的四大功能完整代码。
- 【SSH网上商城项目实战08】查询和删除商品类别功能的实现
- 【SSH网上商城项目实战08】查询和删除商品类别功能的实现
- .Net/C# 封装磁盘目录文件搜索功能的工具类 (实现了与搜索相关的事件,以便插入客户处理代码)
- java IO实现电脑搜索、删除功能
- 应用内实现 iOS 通讯录查询与删除功能的代码
- 美团分类导航按钮效果使用ViewPager+GridView实现左右滑动查看更多分类的功能