BMSF Dictionary Component Implementation

HTML
<div id="apply_type"></div>
<script>
layui.define(['bkadmin'], function (exports) {
    var bkadmin = layui.bkadmin;
    bkadmin.getDic([{
        elem: '#apply_type',
        code: 'apply_type',
        type: 'select',
        fieldName: 'projectType',
        val: '4444'  // Default value
    }]);
});
</script>

Progress:

• Configure dictionary in System Management > Dictionary Management
• Add HTML placeholders with unique IDs
• Call bkadmin.getDic() with configuration array
• Set default values using val parameter
• Add event handlers if needed

Step-by-Step Process

1. Configure Dictionary Data

   • Go to System Management > Dictionary Management
   • Add dictionary type in left panel, record the type identifier
   • Add dictionary items with identifiers and descriptions in right panel

2. Create HTML Placeholders

   HTML
   <div id="apply_type"></div>
   <div id="sex"></div>

3. Initialize Dictionary Components

   JavaScript
   bkadmin.getDic([{
       elem: '#apply_type',
       code: 'apply_type',
       type: 'select',
       fieldName: 'projectType',
       val: 'default_value'
   }]);

Example 1: Select Dropdown with Default

JavaScript
bkadmin.getDic([{
    elem: '#searchProjectType',
    code: 'apply_type',
    type: 'select',
    fieldName: 'projectType',
    onlyLeaf: true,
    val: '4444',  // Sets default selection
    addAllOption: true,
    addAllOptionText: '全部'
}]);

Example 2: Radio Buttons with Default

JavaScript
bkadmin.getDic([{
    elem: '.sex',
    code: 'sex',
    type: 'radio',
    fieldName: 'sex',
    val: '0'  // Default selected value
}]);

Example 3: Checkboxes with Multiple Defaults

JavaScript
bkadmin.getDic([{
    elem: '.status',
    code: 'status_type',
    type: 'checkbox',
    fieldName: 'status',
    val: ['0', '1']  // Array for multiple defaults
}]);

Example 4: Multi-level Dictionary

JavaScript
bkadmin.getDic([{
    elem: '#category',
    code: 'category_tree',
    type: 'select',
    fieldName: 'category',
    onlyLeaf: true,
    expanded: false,
    showLevel: 2,
    val: 'leaf_node_value'
}]);

For Select Components

JavaScript
val: 'dictionary_code'  // Single value

For Radio Components

JavaScript
val: 'dictionary_code'  // Single value

For Checkbox Components

JavaScript
val: ['code1', 'code2']  // Array of values

Dynamic Value Setting

JavaScript
// For single-level select
form.val('filter_name', {'fieldName': 'new_value'});

// For multi-level select
xmSelect.get('#container').setValue(['value'], null, true);

// For radio buttons
form.val('lay-filter', {'fieldName': 'new_value'});

• Call getDic() before loading business data to ensure proper dictionary assignment
• Use unique IDs for each dictionary container to avoid conflicts
• Set meaningful fieldName attributes that match your form processing
• Include val parameter for default selections to improve user experience
• Use onlyLeaf: true for multi-level dictionaries when only leaf nodes should be selectable
• Add event handlers using success callback for dynamic behavior

• Don't call getDic() after business data loads - dictionary values may not assign correctly
• Don't forget to configure dictionaries in System Management before using them
• Don't use same elem selector for multiple dictionary components
• Don't mix val types - use string for single values, array for multiple checkbox values
• Don't rely on form.val() for multi-level select components - use xmSelect.setValue() instead