JQuery QueryBuilder nested rules

Question

I've implemented a JQuery Builder in my .Net MVC 5 App, and it is working fine. But now I want to nest some filters. What does it means?

I have two select2, lets say Category and SubCategory, the behavior I'm looking for is next:

1. If Category has included, then show in SubCategories all values corresponding to its respective Category.
2. If no Category has included, then show all SubCategories.

Here is the way my query builder looks like right now:

var rules_basic = {
	  condition: 'AND',
	  rules: [{
	    id: 'price',
	    operator: 'less',
	    value: 10.25
	  }, {
	    condition: 'OR',
	    rules: [{
	      id: 'category',
	      operator: 'equal',
	      value: 2
	    }, {
	      id: 'category',
	      operator: 'equal',
	      value: 1
	    }]
	  }]
	};

    $('#builder').queryBuilder({
	  plugins: ['bt-tooltip-errors'],
	  
	  filters: [{
	    id: 'category',
	    label: 'Category',
	    type: 'integer',
	    input: 'select',
	    values: {
	      1: 'Category 1',
	      2: 'Category 2'
	    },
	    operators: ['equal', 'not_equal', 'in', 'not_in', 'is_null', 'is_not_null']
	  }, {
	    id: 'subcategory',
	    label: 'SubCategory',
	    type: 'integer',
	    input: 'select',
	    values: {
	      1: 'Subcat 1 - Cat 1',
	      2: 'Subcat 2 - Cat 1',
	      3: 'Subcat 3 - Cat 1',
	      4: 'Subcat 4 - Cat 2',
	      5: 'Subcat 5 - Cat 2',
	      6: 'Subcat 6 - Cat 2'
	    },
	    operators: ['equal', 'not_equal', 'in', 'not_in', 'is_null', 'is_not_null']
	  }],
	  rules: rules_basic
	});
    /****************************************************************
    						Triggers and Changers QueryBuilder
 *****************************************************************/

	$('#btn-get').on('click', function() {
	  var result = $('#builder').queryBuilder('getRules');
	  if (!$.isEmptyObject(result)) {
	    alert(JSON.stringify(result, null, 2));
	  }
	  else{
	  	console.log("invalid object :");
	  }
	  console.log(result);
	});

	$('#btn-reset').on('click', function() {
	  $('#builder').queryBuilder('reset');
	});

	$('#btn-set').on('click', function() {
	  //$('#builder').queryBuilder('setRules', rules_basic);
	  var result = $('#builder').queryBuilder('getRules');
	  if (!$.isEmptyObject(result)) {
	  	rules_basic = result;
	  }
	});

	//When rules changed :
	$('#builder').on('getRules.queryBuilder.filter', function(e) {
		//$log.info(e.value);
	});

  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.query-builder/2.3.3/js/query-builder.standalone.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <div id="builder"></div>
  <button class="btn btn-success" id="btn-set">Set Rules</button>
  <button class="btn btn-primary" id="btn-get">Get Rules</button>
  <button class="btn btn-warning" id="btn-reset">Reset</button>

Here is my Fiddle

里面的点击

我无法弄清楚如何做我想做的事。我在子类别名称中包含Cat只是为了表示它们之间的关系，原始结构是：

public class MainActivity extends BaseActivity {

 private TextView textView; // Code to populate this omitted

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);

  // Create Retrofit service
  LaunchLibService service = ServiceFactory.createRetrofitService(LaunchLibService.class, LaunchLibService.SERVICE_ENDPOINT);

  //getAgencyList returns Observable<AgencyResponse>
  service.getAgencyList()
   .subscribeOn(Schedulers.newThread())
   .observeOn(AndroidSchedulers.mainThread())
   .map(AgencyResponse::getAgencies) // Gets the List<Agency> but how do I iterate over each object and print?
   .subscribe();
 }
}

感谢。