ASP.NET MVC5+EF6+EasyUI 后台管理系统（81）-数据筛选（万能查询）实例

前言

听标题的名字似乎是一个非常牛X复杂的功能，但是实际上它确实是非常复杂的，我们本节将演示如何实现对数据，进行组合查询（数据筛选）

我们都知道Excel中是如何筛选数据的.就像下面一样

他是一个并的关系，我们现在要做的也是这样的效果，下面我们将利用EasyUI的DataGrid为例来扩展（就算是其他组件也是可以的，同样的实现方式！）

实现思路

1.前台通过查询组合json

2.后台通过反射拆解json

3.进行组合查询

虽然短短3点，够你写个3天天夜了

优点：需要从很多数据中得到精准的数据，通常查一些商品他们的属性异常接近的情况下使用

缺点：我实现的方式为伪查询，大量数据请使用存储过程

简单了解

从Easyui的官方扩展中了解到一个JS文件，但是实质上，这个文件BUG很多，在使用中我曾经一度认为是使用出现问题，其实他根本就不可用

所以我这里先献上修改后的整个JS代码

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

(function($){

function getPluginName(target){

if ($(target).data('treegrid')){

return 'treegrid';

} else {

return 'datagrid';

}

var autoSizeColumn1 = $.fn.datagrid.methods.autoSizeColumn;

var loadDataMethod1 = $.fn.datagrid.methods.loadData;

var appendMethod1 = $.fn.datagrid.methods.appendRow;

var deleteMethod1 = $.fn.datagrid.methods.deleteRow;

$.extend($.fn.datagrid.methods, {

autoSizeColumn: function(jq, field){

return jq.each(function(){

var fc = $(this).datagrid('getPanel').find('.datagrid-header .datagrid-filter-c');

fc.hide();

autoSizeColumn1.call($.fn.datagrid.methods, $(this), field);

fc.show();

resizeFilter(this, field);

});

},

loadData: function(jq, data){

jq.each(function(){

$.data(this, 'datagrid').filterSource = null;

});

return loadDataMethod1.call($.fn.datagrid.methods, jq, data);

},

appendRow: function(jq, row){

var result = appendMethod1.call($.fn.datagrid.methods, jq, row);

jq.each(function(){

var state = $(this).data('datagrid');

if (state.filterSource){

state.filterSource.total++;

if (state.filterSource.rows != state.data.rows){

state.filterSource.rows.push(row);

}

});

return result;

},

deleteRow: function(jq, index){

jq.each(function(){

var state = $(this).data('datagrid');

var opts = state.options;

if (state.filterSource && opts.idField){

if (state.filterSource.rows == state.data.rows){

state.filterSource.total--;

} else {

for(var i=0; i<state.filterSource.rows.length; i++){

var row = state.filterSource.rows[i];

if (row[opts.idField] == state.data.rows[index][opts.idField]){

state.filterSource.rows.splice(i,1);

state.filterSource.total--;

break;

}

});

return deleteMethod1.call($.fn.datagrid.methods, jq, index);

}

});

var loadDataMethod2 = $.fn.treegrid.methods.loadData;

var appendMethod2 = $.fn.treegrid.methods.append;

var insertMethod2 = $.fn.treegrid.methods.insert;

var removeMethod2 = $.fn.treegrid.methods.remove;

$.extend($.fn.treegrid.methods, {

loadData: function(jq, data){

jq.each(function(){

$.data(this, 'treegrid').filterSource = null;

});

return loadDataMethod2.call($.fn.treegrid.methods, jq, data);

},

append: function(jq, param){

return jq.each(function(){

var state = $(this).data('treegrid');

var opts = state.options;

if (opts.oldLoadFilter){

var rows = translateTreeData(this, param.data, param.parent);

state.filterSource.total += rows.length;

state.filterSource.rows = state.filterSource.rows.concat(rows);

$(this).treegrid('loadData', state.filterSource)

} else {

appendMethod2($(this), param);

}

});

},

insert: function(jq, param){

return jq.each(function(){

var state = $(this).data('treegrid');

var opts = state.options;

if (opts.oldLoadFilter){

var ref = param.before || param.after;

var index = getNodeIndex(param.before || param.after);

var pid = index>=0 ? state.filterSource.rows[index]._parentId : null;

var rows = translateTreeData(this, [param.data], pid);

var

newRows = state.filterSource.rows.splice(0, index>=0 ? (param.before ? index : index+1) : (state.filterSource.rows.length));

newRows = newRows.concat(rows);

newRows = newRows.concat(state.filterSource.rows);

state.filterSource.total += rows.length;

state.filterSource.rows = newRows;

$(this).treegrid('loadData', state.filterSource);

function getNodeIndex(id){

var rows = state.filterSource.rows;

for(var i=0; i<rows.length; i++){

if (rows[i][opts.idField] == id){

return i;

}

return -1;

}

} else {

insertMethod2($(this), param);

}

});

},

remove: function(jq, id){

jq.each(function(){

var state = $(this).data('treegrid');

if (state.filterSource){

var opts = state.options;

var rows = state.filterSource.rows;

for(var i=0; i<rows.length; i++){

if (rows[i][opts.idField] == id){

rows.splice(i, 1);

state.filterSource.total--;

break;

}

});

return removeMethod2(jq, id);

}

});

var extendedOptions = {

filterMenuIconCls: 'icon-ok',

filterBtnIconCls: 'fa fa-filter fa-lg ',

filterBtnPosition: 'right',

filterPosition: 'bottom',

remoteFilter: false,

showFilterBar: true,

filterDelay: 400,

filterRules: [],

// specify whether the filtered records need to match ALL or ANY of the applied filters

filterMatchingType: 'all', // possible values: 'all','any'

// filterCache: {},

filterMatcher: function(data){

var name = getPluginName(this);

var dg = $(this);

var state = $.data(this, name);

var opts = state.options;

if (opts.filterRules.length){

var rows = [];

if (name == 'treegrid'){

var rr = {};

$.map(data.rows, function(row){

if (isMatch(row, row[opts.idField])){

rr[row[opts.idField]] = row;

row = getRow(data.rows, row._parentId);

while(row){

rr[row[opts.idField]] = row;

row = getRow(data.rows, row._parentId);

}

});

for(var id in rr){

rows.push(rr[id]);

}

} else {

for(var i=0; i<data.rows.length; i++){

var row = data.rows[i];

if (isMatch(row, i)){

rows.push(row);

}

data = {

total: data.total - (data.rows.length - rows.length),

rows: rows

};

}

return data;

function isMatch(row, index){

var rules = opts.filterRules;

if (!rules.length){return true;}

for(var i=0; i<rules.length; i++){

var rule = rules[i];

var source = row[rule.field];

var col = dg.datagrid('getColumnOption', rule.field);

if (col && col.formatter){

source = col.formatter(row[rule.field], row, index);

}

if (source == undefined){

source = '';

}

var op = opts.operators[rule.op];

// if (!op.isMatch(source, rule.value)){return false}

var matched = op.isMatch(source, rule.value);

if (opts.filterMatchingType == 'any'){

if (matched){return true;}

} else {

if (!matched){return false;}

}

return opts.filterMatchingType == 'all';

}

function getRow(rows, id){

for(var i=0; i<rows.length; i++){

var row = rows[i];

if (row[opts.idField] == id){

return row;

}

return null;

}

},

defaultFilterType: 'text',

defaultFilterOperator: 'contains',

defaultFilterOptions: {

onInit: function(target){

var name = getPluginName(target);

var opts = $(target)[name]('options');

var field = $(this).attr('name');

var input = $(this);

if (input.data('textbox')){

input = input.textbox('textbox');

}

input.unbind('.filter').bind('keydown.filter', function (e) {

var t = $(this);

if (this.timer){

clearTimeout(this.timer);

}

if (e.keyCode == 13) {

_doFilter();

}

else {

this.timer = setTimeout(function(){

_modifyFilter();

}, opts.filterDelay);

}

});

function _doFilter() {

var rule = $(target)[name]('getFilterRule', field);

var value = input.val();

if (value != '') {

$(target)[name]('addFilterRule', {

field: field,

op: opts.defaultFilterOperator,

value: value

});

} else {

if (rule) {

$(target)[name]('removeFilterRule', field);

}

$(target)[name]('doFilter');

};

function _modifyFilter() {

var rule = $(target)[name]('getFilterRule', field);

var value = input.val();

if (value != '') {

if ((rule && rule.value != value) || !rule) {

$(target)[name]('addFilterRule', {

field: field,

op: opts.defaultFilterOperator,

value: value

});

}

else {

if (rule) {

$(target)[name]('removeFilterRule', field);

}

};

}

},

filterStringify: function(data){

return JSON.stringify(data);

},

onClickMenu: function(item,button){}

};

$.extend($.fn.datagrid.defaults, extendedOptions);

$.extend($.fn.treegrid.defaults, extendedOptions);

// filter types

$.fn.datagrid.defaults.filters = $.extend({}, $.fn.datagrid.defaults.editors, {

label: {

init: function(container, options){

return $('<span></span>').appendTo(container);

},

getValue: function(target){

return $(target).html();

},

setValue: function(target, value){

$(target).html(value);

},

resize: function(target, width){

$(target)._outerWidth(width)._outerHeight(22);

}

});

$.fn.treegrid.defaults.filters = $.fn.datagrid.defaults.filters;

// filter operators

$.fn.datagrid.defaults.operators = {

nofilter: {

text:Lang.Nofilter //'No Filter'

},

contains: {

text:Lang.Contains ,

isMatch: function(source, value){

source = String(source);

value = String(value);

return source.toLowerCase().indexOf(value.toLowerCase()) >= 0;

}

},

equal: {

text:Lang.Equal,

isMatch: function(source, value){

return source == value;

}

},

notequal: {

text: Lang.Notequal,

isMatch: function(source, value){

return source != value;

}

},

beginwith: {

text: Lang.Beginwith,

isMatch: function(source, value){

source = String(source);

value = String(value);

return source.toLowerCase().indexOf(value.toLowerCase()) == 0;

}

},

endwith: {

text:Lang.Endwith,

isMatch: function(source, value){

source = String(source);

value = String(value);

return source.toLowerCase().indexOf(value.toLowerCase(), source.length - value.length) !== -1;

}

},

less: {

text: Lang.Less,

isMatch: function(source, value){

return source < value;

}

},

lessorequal: {

text: Lang.Lessorequal,

isMatch: function(source, value){

return source <= value;

}

},

greater: {

text: Lang.Greater,

isMatch: function(source, value){

return source > value;

}

},

greaterorequal: {

text: Lang.Greaterorequal,

isMatch: function(source, value){

return source >= value;

}

};

$.fn.treegrid.defaults.operators = $.fn.datagrid.defaults.operators;

function resizeFilter(target, field){

var toFixColumnSize = false;

var dg = $(target);

var header = dg.datagrid('getPanel').find('div.datagrid-header');

var tr = header.find('.datagrid-header-row:not(.datagrid-filter-row)');

var ff = field ? header.find('.datagrid-filter[name="'+field+'"]') : header.find('.datagrid-filter');

ff.each(function(){

var name = $(this).attr('name');

var col = dg.datagrid('getColumnOption', name);

var cc = $(this).closest('div.datagrid-filter-c');

var btn = cc.find('a.datagrid-filter-btn');

var cell = tr.find('td[field="'+name+'"] .datagrid-cell');

var cellWidth = cell._outerWidth();

修改版datagrid-filter.js

为了实现一个目的：输入数据后按回车查询数据。

这个扩展可以集成：Easyui 90%的Form组件

1.时间

2.数字

3.下拉Combobox

4.密码框

等等…….

实际上只用到1,2,3个Combxbox一般为动态数据AJAX从后台获取

看到代码（我已经封装好了，尽情调用即可，想要了解就进入查看代码写法和逻辑）

上面的废话已经说完了！下面来说说如何调用

前端实现方式

1.引入datagrid-filter.js

ASP.NET MVC5+EF6+EasyUI 后台管理系统（81）-数据筛选（万能查询）实例

相关文章

快网idc优惠网

相关文章

微信

快网idc优惠网

QQ交流群